A few things that have been bugging me

dtmcl

Well-known member
Well i am Making a new design for my forum and a few things have left me scratching my head..

First is the breadcrumb, I cannot get my gradient to fill the arrows

jBIMDwURW8q05.png


Second is due to new styling in 1.1

jbopUJK5IKjTqD.png


The quick search box now has <div class="primaryControls"> and leaves an ugly background color which has left me banging my head. I tried adding the following to extras.css but with no prevail

.formPopup .primaryControls {

background: none transparent;
}

The third is a gap that is left to the right of the forum, I changed the width of the sidebar and everything looked fine on localhost but when I transferred it all to my live forum for testing a gap was left on the right. I disabled the recent status updates and the gap is still there. Also the layout of the recent status's is messed up as you can see in the screenshot.

j4KKWeHjro5Zj.png


Any help would be greatly appreciated :D
 
This is going back a while now but for the breadcrumb try changing the red section in the following example image, Hope this helps a bit

Screen Shot 2011-10-09 at 10.06.40 PM.webp
I had a simular if not same issue with the search but it is long forgotten.
 
Thanks for the reply

I need to use a gradient image to replace the arrows, I don't think it can be done via style properties so it would most likely need to be CSS.

The red border is just a color and no image can be used there and the search problem is caused by new 1.1 styling, it appeared after upgrading to 1.1
 
Try this for search, assuming it's the dark blue you are trying to change.

Code:
.formPopup .primaryControls input.textCtrl {
background-color: #CC0000;
}

Change the styling to suit.
 
Code:
input#QuickSearchQuery.textCtrl {
    background: none repeat scroll 0 0 #446098;
    border: 1px solid #1D2C4A;
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF;
}

That is the code I use to change the color/border etc; of the search box in my new style but since the upgrade to 1.1 both of my styles (current & new one) have a white background underneath the search box styling.

In both styles I have moved the search box away from its default placing by editing top -30px; in search_bar.css

I have tried using .formPopup .primaryControls to make the white background transparent but it just does not budge.
 
Transparent for what purpose?
Make it the same colour of the background, or whatever it is you're trying to blend it into.

I used red and it worked fine in Firebug.
 
search.webp

10 seconds in Firebug editing .formPopup and .formPopup .primaryControls.

I can't test it on the dark theme as it's not available for me.
 
This is a crude method but rather than use background-color (which i used last week) you could crop part of the gradient and use background so it appears seamless. take a screenshot of the gradient and then apply it as a background:
 
add the following to your extra.css template and use the gradient in the attachment whilst inserting the correct path to your style which will give you that seamless look.

Code:
.formPopup {
    background: url('@imagePath/your/imagepath/bg_search.png') repeat-x  !important;
}
 

Attachments

  • bg_search.webp
    bg_search.webp
    80 bytes · Views: 7
Strangely, after adding your code to extra.css I forgot to change the image path (Because i'm dopey :ROFLMAO: ) and it seems it removed the background color, I removed the image part and that works. Well in Firefox atleast.

Code:
.formPopup {
    background: repeat-x  !important;
}

Thankyou very much for the help Shelly, Now I can stop banging my head off things.. well atleast for now (y)
 
Top Bottom