Very strange template behaviour

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?

#loginBar a
{
@property "loginBarLink";
color: #a4a4a4;
@property "/loginBarLink";
}

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.
 
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.
 
Code:
#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.
 
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):

Code:
#loginBar a
{
color: #a4a4a4 !important;
}

That will override the CSS without changing the style property.
 
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:

xenforo10.webp
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.

Code:
<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).

xenforo11.webp

Note that I still want to only alter the lower right image (not both). Is it possible?
 
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.
 
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?

xenforo12.webp
 
Quoted from this topic: http://xenforo.com/community/threads/style-properties.32483/
I use Chrome which has built-in dev tools very similar to Firebug. Load the page. Turn on the dev tools. Find the element in the HTML source and look at the relevant CSS associated with that element.

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:

xenforo13.webp

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

Code:
/** handle **/
/** HIDE LOGIN BAR 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";
}
**/

Code:
<!-- LOGIN OR SIGNUP LINK HIDDEN FROM LOGIN BAR HANDLE -->
 
<!--
<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>
            </h3>
         
            <span class="helper"></span>
 
            <xen:edithint template="login_bar_form" />
        </div>
    </div>
</div>
-->

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.

xenforo15.webp

xenforo16.webp
 
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

Code:
.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 :)
 
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.

xenforo47.webp

xenforo48.webp
 
Top Bottom