A few things that have been bugging me

[dtmcl]

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

Second is due to new styling in 1.1

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.

Any help would be greatly appreciated

 

[Brett Peters]

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


I had a simular if not same issue with the search but it is long forgotten.

 

[dtmcl]

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

 

[Paul B]

Try this for search, assuming it's the dark blue you are trying to change.

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

Change the styling to suit.

 

[dtmcl]

Nope, It's the white behind it.

The dark blue is as I designed it

 

[Paul B]

.formPopup .primaryControls works for me.

 

[dtmcl]

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.

 

[Paul B]

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.

 

[dtmcl]

The header background is a gradient image

 

[Paul B]

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.

 

[dtmcl]

What did you edit there?

 

[Shelley]

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:

 

[Shelley]

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.

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

 

[dtmcl]

Strangely, after adding your code to extra.css I forgot to change the image path (Because i'm dopey ) and it seems it removed the background color, I removed the image part and that works. Well in Firefox atleast.

.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