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

Some more questions regarding styling

Discussion in 'Styling and Customization Questions' started by Divvens, Sep 24, 2011.

  1. Divvens

    Divvens Well-Known Member

    I'm working on a Halloween theme for my board, I must say its much easier the second time xD The first theme I made I needed help in every stage, but I still have a few problems I'm facing I tried to sort it out but...couldn't ^^

    First, I want to add the following effect to the sidebar (on the forum home)
    Code:
    border: 1px solid @pageBackground;
    border-radius: 2px;
    box-shadow: 1px 1px 2px rgba(0,0,0, 0.4);
    If I add it to secondary content, other things like drop down options seem to get a bit messed up. Is there anyway I can apply those settings only to the side bar?

    Second,
    I am facing this weird problem, I tried everything but can't seem to get the right option to change the on hover colors for the drop down menu links screenshot attached.
    theprob.png


    Third,
    I want to change the image size (of forum icons read/unread/links) to 50x50, I had come across this option before but after looking over the styling options I can't seem to find the option again xD Can someone tell me where is the option to change the sizes from 40x40 to 50x50?
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    For the sidebar you can apply styling to each block (e.g. <div class="section membersOnline userList">) - use Firebug to determine the classes and add the markup to EXTRA.css.

    For point 2, try adding this to EXTRA.css:
    .blockLinksList a:hover, .blockLinksList a:focus, .blockLinksList label:hover, .blockLinksList label:focus

    For the node icon: Style Properties -> Forum List -> Node Icon
     
    CapnLuffy likes this.
  3. Divvens

    Divvens Well-Known Member

    The other two seem to be sorted out, thanks ^^

    But this one is still giving me a problem, I added that line to the extra.css, nothing changed. Added the following:
    Code:
    .blockLinksList a:hover, .blockLinksList a:focus, .blockLinksList label:hover, .blockLinksList label:focus
    {
    background-color: #281e3a !important;
    text-decoration: none;
    }
    And still nothing changed! The hover background color is still the same. Am I doing something wrong?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    This is working for me:
    Code:
    .blockLinksList a:hover, .blockLinksList a:focus, .blockLinksList label:hover, .blockLinksList label:focus {
    background-color: #cc0000;
    }
    It's possible that particular menu isn't using the same default classes as that is an add-on.
     
  5. Divvens

    Divvens Well-Known Member

    I added that to the extra.css, even the help drop down links dont seem to change. Neither does the forum drop down menu. Could this be due to something conflicting with an add-on?
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    It's more than likely something with your style.

    What does Firebug show when inspecting the elements?

    Edit: I was just able to change it in Firebug on your default style so the classes are the same. Are you sure you're applying the code to the correct template/style?
     
  7. Divvens

    Divvens Well-Known Member

    I am adding it to the extra.css for the style I need (correct one).

    Hmm, can you tell me if this is something that can be changed in the templates? Maybe I have done something there...
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    It's difficult to say without seeing the style and inspecting the code.
     
  9. Divvens

    Divvens Well-Known Member

    I've enabled the theme to be selected, please let me know after you have viewed it :p
     
  10. Divvens

    Divvens Well-Known Member

    Sorry for double posting, but its the same problem even on pages. I am sure it was ok before, but now the hover acts the same way on page navigation as well.
     
  11. Brogan

    Brogan XenForo Moderator Staff Member

    I'm not having any issues in Firebug.

    hover.jpg
     
  12. Divvens

    Divvens Well-Known Member

    Even my co-admin can seem to change it on firebug >.< but if I add it to the extra.css (And I'm adding it to the right theme's css) it just doesn't seem to work. Is there a way to change it from style properties?

    If not can I give you my account pw by pm so that you can see whats wrong? I'm totally lost I tried changing the color to white/black adding !important ahead but nothing seems to change the on hover bg color
     
  13. Brogan

    Brogan XenForo Moderator Staff Member

    Sure, send me the details via conversation and I'll see if I can get it to work.
     
  14. Brogan

    Brogan XenForo Moderator Staff Member

    For some reason, the markup in EXTRA.css isn't being applied.

    So I just changed it in Style Properties -> Popup Menus -> Menu Link, Hover State: Background Color

    You can change the password now and reapply the .htaccess protection :)
     
  15. Divvens

    Divvens Well-Known Member

    Thanks Brogan ^^ Sorry for giving you all the trouble.

    It's weird, the other codes in EXTRA.css seems to have applied but this just wasn't working.

    Should that have also changed the alerts onhover bg color and conversation onhover bg color? Since that still stays the same while on hover. Can that be changed via properties as well?
     
  16. Brogan

    Brogan XenForo Moderator Staff Member

    No, that's a separate class: .navPopup .PopupItemLinkActive:hover
    You will have to use EXTRA.css for it though as there's no Style Property available.
     
  17. Divvens

    Divvens Well-Known Member

    Hmm the extra.css changes are not being applied at all...>.<
    Could this be a server side problem (I don't think so but I don't know whats causing the problem xD)
     
  18. Divvens

    Divvens Well-Known Member

    Ok Brogan I spotted the problem! I BLAME THIS -> }

    It was missing in one of the earlier css edits in EXTRA.CSS which wasn't applying anything we were doing omg I feel like such a fool for not noticing that!
     
  19. Brogan

    Brogan XenForo Moderator Staff Member

    Ah, good spot.

    I didn't actually check the existing code, although I probably should have...

    Using a text editor helps to identify issues such as that. I use Notepad++.
     
    CapnLuffy likes this.
  20. Divvens

    Divvens Well-Known Member

    About that, would it be something like this in the extra.css
    Code:
    .section membersOnline userList
    {
    border: 1px solid @pageBackground;
    border-radius: 2px;
    box-shadow: 1px 1px 2px rgba(0,0,0, 0.4);
    }
    or
    Code:
    #section membersOnline userList
    {
    border: 1px solid @pageBackground;
    border-radius: 2px;
    box-shadow: 1px 1px 2px rgba(0,0,0, 0.4);
    I'm kinda noobish with css xD
     

Share This Page