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

XF 1.2 A Few Questions Regarding Styling

Discussion in 'Styling and Customization Questions' started by Divvens, Aug 13, 2013.

  1. Divvens

    Divvens Well-Known Member

    I'm styling the navigation menu as per needed via EXTRA.css and style properties, but there is one thing that I cannot figure out.
    problem.png

    My navbar "hover" and navbar popup open "background colors" work fine, but there is a split second where the primary colors (not what I want) are still shown while hovering over the arrow to open the drop down.

    This is over quite quick and I can't get a screenshot, but what is happening is;
    Just hovering over the nav link has the background I want
    The nav link popup open has the background I want
    But the jump in between, a little time between hovering and the popup opening I get the primary colors (grey) which I don't want.

    What would the css fix for that be?

    Edit:
    I managed to get a screenshot after several tries, the time span for when the nav tab is grey/primary color and not the set background color is very short, after hovering over the arrow to initiate the drop down it appears.
    [​IMG]

    Edit 2:
    Answered
    Thanks to @Qwk86gn

    For the nav tab problem, the fix was
    .navTabs .navTab.PopupClosed:hover { background-color: @primaryDark; }
    Insert your color of choice.

    And for the Preview Tool Tip Arrow problem
    .xenPreviewTooltip .arrow span { border-top: 15px solid @primaryDark; }
    Insert your color of choice.

    I hope this also helps others who come across the same problem.
     
    Last edited: Aug 13, 2013
    Brad L likes this.
  2. Tracy Perry

    Tracy Perry Well-Known Member

    Not sure.. but have you checked in your Style Properties ->PageNav, Link Groups and Tabs
    to make sure that the Tab Hover State background color is set as transparent? I know on one style I was messing with I had to do that to make my CSS as primary without a transition effect.
     
    Last edited: Aug 13, 2013
  3. Divvens

    Divvens Well-Known Member

    I set it to transparent but it didn't solve the issue.

    I managed to get a screenshot after several tries, the time span for when the nav tab is grey/primary color and not the set background color is very short, after hovering over the arrow to initiate the drop down it appears.
    problem.png
     
  4. Shelley

    Shelley Well-Known Member

    Have you got a link to your style you can post here?
     
  5. Divvens

    Divvens Well-Known Member

    Ah, currently I'm developing it locally on Xampp. I guess if I can't figure it out I'll provide the link once it's online on my board.
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    That split second colour change is a nightmare to catch.

    I have managed to resolve it on my site but I don't know how exactly - it took me hours though...
     
  7. Divvens

    Divvens Well-Known Member

    Is the world going to end? Brogan doesn't have an answer :eek:
    Jk jk,

    I somehow worked it out on my other themes as well but I have no idea how... should have written it down somewhere.
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    It's one of the changes I made in SPs or EXTRA.css but I'm not sure which one.

    By the time I managed to resolve it I was past the point of being rational so didn't note it down :D
     
    mistypants and Divvens like this.
  9. Divvens

    Divvens Well-Known Member

    I have another issue :eek:

    I can't seem to change the preview tooltip arrow color.
    tooltipheadache.png

    Style Property Groups > Overlay and Tooltips > Preview tooltip outer and Preview tooltip inner don't seem to be changing it.
     
  10. Divvens

    Divvens Well-Known Member

    I can't seem to figure out why that tooltip isn't changing it's color via style properties. Neither can I figure out the css to directly edit it :notworthy:
     
  11. Steve F

    Steve F Well-Known Member

    Here is the the CSS found in xenforo.css, the arrow color is being pulled from primaryContent.background-color under .xenPreviewTooltip .arrow span

    Code:
    .xenPreviewTooltip
    {
        @property "previewTooltip";
        border: 10px solid @primaryMedium;
        border-radius: 10px;
        position: relative;
        box-shadow: 0px 12px 25px rgba(0,0,0, 0.5);
        width: 400px;
        @property "/previewTooltip";
       
        display: none;   
        z-index: 15000;
        cursor: default;
       
        border-color: {xen:helper rgba, @previewTooltip.border-color, 0.5};
    }
    
        .xenPreviewTooltip .arrow
        {
            @property "previewTooltipArrowOuter";
            border-top: 15px solid rgba(3,42,70, 0.25);
            border-right: 15px solid transparent;
            border-bottom: 1px none black;
            border-left: 15px solid transparent;
            position: absolute;
            bottom: -15px;
            left: 22px;
            @property "/previewTooltipArrowOuter";
           
            _display: none;
        }
       
            .xenPreviewTooltip .arrow span
            {
                @property "previewTooltipArrowInner";
                border-top: 15px solid @primaryContent.background-color;
                border-right: 15px solid transparent;
                border-bottom: 1px none black;
                border-left: 15px solid transparent;
                position: absolute;
                top: -17px;
                left: -15px;
                @property "/previewTooltipArrowInner";
            }
    
     
    Divvens likes this.
  12. Steve F

    Steve F Well-Known Member

    There is 3 elements there for the navTabs, I would search for these 3, the first 2 being the main ones and see if you can find that color your seeing.

    Code:
    .navTabs .navTab.PopupClosed:hover
    Code:
    .navTabs .navTab.PopupClosed .navLink:hover 
    Code:
    .navTabs .navTab.PopupClosed .SplitCtrl
     
    Divvens likes this.
  13. Divvens

    Divvens Well-Known Member

    @Qwk86gn
    Thank you so much, really, you helped me out on both the issues!

    For the nav tab problem, the fix was
    .navTabs .navTab.PopupClosed:hover { background-color: @primaryDark; }
    Insert your color of choice.

    And for the Preview Tool Tip Arrow it was
    .xenPreviewTooltip .arrow span { border-top: 15px solid @primaryDark; }
    Insert your color of choice.

    I hope this also helps others who come across the same problem.
     
  14. Divvens

    Divvens Well-Known Member

    I have another question, I think this would be my last. I've got a pretty good hang of the styling system now :) Thanks to everyone.

    Which is the best place I can include custom style CSS file so that xenForo loads it? I want to keep my extra.css clean for actual extra stuff and not theme related css edits. I plan to create a css for my style, infact multiple css, but where do I "include" it? PAGE_CONTAINER or include it in the main xenforo css file?
     
  15. Steve F

    Steve F Well-Known Member

    Divvens likes this.
  16. Divvens

    Divvens Well-Known Member

    The style has almost come along, I've run into one minor issue.

    My menu links (blockLinksListitem) has text color white, because my navigation drop-down has a black background, but this is creating a problem for blockLinksListitem on page node navigation tabs;
    bloclist.png

    Is there a way I can change the text color only on the page node navigation and not the menu drop down navigation? I tried;
    Code:
    #pageNodeNavigation .secondaryContent .blockLinksListitem { color: #000000 !important; }
    #pageNodeNavigation .blockLinksListitem { color: #000000 !important; }
    But both of them don't seem to be the right selectors.
     
  17. Brogan

    Brogan XenForo Moderator Staff Member

    Try:
    Code:
    #pageNodeNavigation a {
    color: red;
    }
     
    Divvens likes this.
  18. Divvens

    Divvens Well-Known Member

    That worked, thank you! Now I feel foolish for not trying that haha.
     

Share This Page