Using Extra.css to transfer/retain custom style changes, and finding element names?

[CTXMedia]

I've so far managed to re-style without touching a template. for XF

I'm sticking to the default layout and recolouring and changing logos/icons - but a thought struck me tonight that I could put all the changes into Extra.css and re-apply them when I reinstall for the proper migration and after any future XF updates.

I've been using the Style Properties tool in the ACP to alter things, but how do I get the name of an element so I can add the change to Extra.css instead?

I've seen the @Name that appears when I hover - do I just add a dot instead to add it to extra - .Name { ... ?

Cheers,
Shaun

 

[Caelum]

Not quite sure I get what you're after, but if I do, it depends on the browser you're running.

In chrome:

1. Right click the element
2. Select 'inspect element'
3. Navigate the HTML with the left column and the CSS with the right side one

In all honesty though, I'd say it's more effort than it's worth, doubly so if you've never done it before. migration should theoretically be fine usnig style properties. But if you insist, let me know which browser you use

 

[Floris]

The unique id of the property is what it will display.

uniquid: xenfans_copyright as style property, with content "hey hello"

in the template:

<div>@xenfans_copyright</div>

outputs: <div>hey hello</div>

I hope that's what you mean.

Now, if you want to use this in css, such as unique id : xenfans_css with value #eee

then you don't do:

.@xenfans_css, but

.whateverclassyouareusing {
color: @xenfans_css
}

 

[Paul B]

I've seen the @Name that appears when I hover - do I just add a dot instead to add it to extra - .Name { ... ?

That's more or less the case.

If you take the @pageWidth Style Property in General -> Page Width Controller for example, that appears in public.css as follows:

.pageWidth
{
    @property "pageWidth";
    width: 992px;
    margin: auto;
    @property "/pageWidth";
}

However, I wouldn't recommend using EXTRA.css for everything as it's not always last in the cascade, so you will need to use !important some of the time.

Just make a note of any changes you make in Style Properties, document them and then copy them to your new installation.
It really doesn't take that long and you only need to do it once.

Don't forget that Style Properties aren't affected during upgrades; your changes will be retained.

 

[CTXMedia]

That's more or less the case.

If you take the @pageWidth Style Property in General -> Page Width Controller for example, that appears in public.css as follows:

.pageWidth
{
    @property "pageWidth";
    width: 992px;
    margin: auto;
    @property "/pageWidth";
}

However, I wouldn't recommend using EXTRA.css for everything as it's not always last in the cascade, so you will need to use !important some of the time.

Just make a note of any changes you make in Style Properties, document them and then copy them to your new installation.
It really doesn't take that long and you only need to do it once.

Don't forget that Style Properties aren't affected during upgrades; your changes will be retained.

Thanks Paul - that was pretty much what I was getting at - however I didn't realise that Style Properties weren't affected during upgrades - that's good to know and negates the idea about using EXTRA.css for most things.

I'm actually re-styling the temp mods forum I setup so I can keep it as a reference install for when I do finally migrate the main site. I'll be able to copy the style properties over during the post/threads import (which is going to take ages anyway ... ).

Cheers,
Shaun