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

Very strange template behaviour

Discussion in 'Styling and Customization Questions' started by Neil E., Jul 3, 2012.

  1. Neil E.

    Neil E. Active Member

    When first going to ....community/index.php, I get a small Log In or Sign Up link in the top right corner of my screen. This link is very small and I would like to increase the size and style without changing the properties of other links. Using "Inspect Element" is see that it is #logInBar a, so I search the templates and find it in login_bar.css

    I left this alone and as an experiment copied the original code to EXTRA.css (without commenting it out in login_bar.css). I changed the color to #a4a4a4 ONLY in EXTRA.css. I was wondering if EXTRA.css would have priority. Nothing changed when refreshing the forum index.

    Here's the strange part: In the original template the color was @primaryLight. Making this change to EXTRA.css ALSO UPDATED THE ORIGINAL TEMPLATE! Obviously my change to #logInBar a had unexpected repercussions.

    What is going on?

    I guess what seems most unusual is that login_bar.css does not get highlighted in red or otherwise marked to indicate that an edit has ocurred.
  2. simbolo

    simbolo Well-Known Member

    I'm not sure about your error but the easiest way to edit that is through the admin styler.
    Login to the admin then:
    Appearance > Styles > {Your style name here} > Style Property Groups > Login Bar > Links

    You can change the color, etc in there.
  3. Steve F

    Steve F Well-Known Member

    #loginBar a
    @property "loginBarLink";
    color: #a4a4a4;
    @property "/loginBarLink";
    When using that code your are virtually changing the style property not the template.

    @property "loginBarLink" is tied to the style properties so when you changed it in the EXTRA.css, it changed the property thus updating the login_bar.css template.
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Qwk86gn is correct. You can undo your inadvertent change to the style property by going where simbolo said (there will be a "revert" checkbox).

    Then you can redo your EXTRA.css code, but use this (no @property):

    #loginBar a
    color: #a4a4a4 !important;
    That will override the CSS without changing the style property.
  5. Neil E.

    Neil E. Active Member

    I put the login_bar.css back to it's original code.
    I went to Style Property Groups > Login Bar > Links and changed the color and font size and added an underline. Result below:

    So the text color changed INSIDE the login box, but not at the lower right. The font changed in BOTH locations. I'm trying to only highlight the lower right link, preferrably with font size and background color. Continuing on, I tried to use Jake's code change with some additions.

    <xen:comment> CHANGE LOGIN LINK TOP RIGHT OF PAGE </xen:comment>
    #loginBar a
    color: #000000 !important;
    background-color: #00ff7f !important;
    border-radius: 5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 14pt !important;
    You can see some grey on both sides of the modified Log in or Sign up button. Increasing the padding further doesn't cover this (and also pushes the "forgot your password" link over two lines).


    Note that I still want to only alter the lower right image (not both). Is it possible?
  6. Steve F

    Steve F Well-Known Member

    There is a style property under "Login Bar" called "Handle", that is what you change to make the background color you want. With your code above you are changing the background color of the links of the login bar.

    The "a" is for the links only in that class

    #loginBar #loginBarHandle is the class in the login_bar.css that controls the background. You should also be able to specify font size separately with that same style property.
  7. Neil E.

    Neil E. Active Member

    Ding, ding, ding ....... winner, thank you. I don't know how I missed the style property "handle" when looking for this.
    The css allowed for any change I wanted. So on a related note, I have to ask what the "handle" button is actually for. By this I mean why even have it there? It would make more sense to change the SIGN UP NOW! button text to Log in or Sign up and have only one button. They both open the Login Bar. Can anyone provide a condition where the "handle" is necessary?

  8. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    They are the same. Strictly speaking you don't "need" them both.
  9. Neil E.

    Neil E. Active Member

    Quoted from this topic: http://xenforo.com/community/threads/style-properties.32483/
    I'm not keen on Chrome, so I installed FireBug. Now our task is to identify where to change the Sign Up Now! text. Here's what FireBug shows when looking at that button:


    How does this lead me to the css? I don't see the connection between the HTML source and the CSS. I want to understand how to do this stuff.
  10. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    To change language you need to search the phrases:

    Admin CP -> Appearance -> Search Phrases
  11. Neil E.

    Neil E. Active Member

    Thanks, I was able to find the phrase OK and thus could change the text. If my text is too large, how do I go about changing the button size? This gets back to the business of finding the button.
  12. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Admin CP -> Appearance -> Style Properties -> Buttons

    There are Sign-up Now Button properties in there.
  13. Neil E.

    Neil E. Active Member

    Thank you Jake. I was able to adjust the button as desired. Carrying on regarding the "handle", I decided to remove it from the page by commenting out the handle and it's link.

    /** handle **/
    #loginBar #loginBarHandle
        @property "loginBarHandle";
        font-size: 12px;
        color: @contentText;
        background-color: rgb(105, 255, 100);
        padding: 0 10px;
        margin-right: 20px;
        border-radius: 10px;
        position: absolute;
        right: 0px;
        bottom: -30px;
        text-align: center;
        z-index: 1;
        line-height: 25px;
        box-shadow: 0px 2px 5px @primaryDarker;
        @property "/loginBarHandle";
    <xen:require css="login_bar.css" />
    <div id="loginBar">
        <div class="pageWidth">
            <div class="pageContent"> 
                <h3 id="loginBarHandle">
                    <label for="LoginControl"><a href="{xen:link login}" class="concealed noOutline">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase log_in_or_sign_up}, {xen:phrase log_in}}</a></label>
                <span class="helper"></span>
                <xen:edithint template="login_bar_form" />
    Unexpectedly this has defeated the "top of screen" push down login bar. Now when I click on my Log in / Sign up button (Sign Up Now! renamed), the page changes to a Login page. This is OK as I anticipate that most users will check stay logged in and not see the Login page anyway.


  14. RobinHood

    RobinHood Well-Known Member

    The handle may be redundant on the forum index page as there's a large call to action 'Sign up now' button on it, but it provides the user with a way to log into the site if they're browsing any other page on the site. So if an unregistered user is browsing a thread and all of a sudden they decide to participate - how do they log in if there no handle?

    What you could do is hide the handle from pages that already have the sidebar with the 'Sign up now' button in it by putting this in your Extra.css

    .Public.LoggedOut.Sidebar.hasJs #loginBarHandle{
    display: none;
    This has the added advantage that you keep the drop down login bar when 'Sign up now' is clicked :)
  15. Neil E.

    Neil E. Active Member

    I finally decided not to use the sidebar at all. The only way to login is to use the login button that sits in the nav bar. This brings up Jake's neat login overlay. I have no problem with users going back to the forum index to login. They are already used to doing this.



Share This Page