1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

A few things that have been bugging me

Discussion in 'Styling and Customization Questions' started by ShadyX, Oct 9, 2011.

  1. ShadyX

    ShadyX 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

    [​IMG]

    Second is due to new styling in 1.1

    [​IMG]

    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.

    [​IMG]

    Any help would be greatly appreciated :D
     
  2. Brett Peters

    Brett Peters Well-Known Member

    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.png
    I had a simular if not same issue with the search but it is long forgotten.
     
    ShadyX likes this.
  3. ShadyX

    ShadyX Well-Known Member

    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
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    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.
     
  5. ShadyX

    ShadyX Well-Known Member

    Nope, It's the white behind it.

    The dark blue is as I designed it ;)
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    .formPopup .primaryControls works for me.
     
  7. ShadyX

    ShadyX Well-Known Member

    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.
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    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.
     
  9. ShadyX

    ShadyX Well-Known Member

    The header background is a gradient image
     
  10. Brogan

    Brogan XenForo Moderator Staff Member

    search.PNG

    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.
     
    ShadyX likes this.
  11. ShadyX

    ShadyX Well-Known Member

    What did you edit there? :)
     
  12. Shelley

    Shelley Well-Known Member

    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:
     
  13. Shelley

    Shelley Well-Known Member

    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;
    }
     

    Attached Files:

    ShadyX likes this.
  14. ShadyX

    ShadyX Well-Known Member

    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)
     

Share This Page