?

Log in

No account? Create an account

Previous Entry | Next Entry

creating own css classes? possible?

  • Feb. 22nd, 2014 at 2:12 PM
i searched for a faq or help page mentioning it, goggled like mad, didn't find it...
though it's such a basic question ~

is it possible at all to add OWN classes/IDs?? ! IN THE CSS PANEL + ENTRY !
without to touch the layer - only HTML in the entry (i have 1 recurrent div or table i'd like to customize) and a corresponding css block in my sheet. because if i have to write the style inline for every div/table in the entry (a faq), it will fill my entry allowed space in no time, and give me a headache looking at its code.

i tried, it works inline:



but not calling the css with a class, it doesn't work, but i probalbly screwed up - or it's impossible.

in the entry:


and in my css panel (no ext sheet)

.faqGreen {
border: 1px solid green;
background-color: aqua;
color: #221203;
border-radius: 20px;
}

what am i forgetting? or is it sheer impossible on lj?

because when i test it in notepad++, with the style in the header (EXACTLY what LJ does with the css from the customize panel! i can see it in my page's header looking at the source code) - it WORKS.
though, when i look at my page with mozilla's webinspector, and pick this div or table (i tried both), even i can see the css block in my header, no mention of my "faqGreen" formatting on the element itself. i tried !important too btw, no use. as if it had been stripped.. somehow? "inbetween?" makes no sense ~

Comments

( 15 comments — Leave a comment )
mangacrack
Feb. 23rd, 2014 01:38 pm (UTC)
Personally I think custom css on lj is a nightmare.
I recommend installing Firebug. Press Ctrl. + Shift + C and you get a sidebar that shows you the EXACT coding, all div names and the css.

You can test your css by editing in Firebug. All you have to do is, copy it into the custom css box.
portisheart
Feb. 23rd, 2014 02:02 pm (UTC)
this mozilla inspector thingy does the same more or less, dunno how it's called. but basically, this css works fine - just not here.

i just need to know 1 single basic info: if custom classes are possible/work when they're added in the entry + customization panel.

else, i won't waste time any further and i'll just style every div in the tag. bothersome, messy to look at, might explode my entry space, but works perfectly.

i'm not even touching layers, nor do i want to learn it atm, nor any other prog, tutorial etc.
cuz i need just it for 1 single entry, 1 red and 1 green border/bgd combination.

all i need in short, is a yes or no answer, maybe a how.
mangacrack
Feb. 23rd, 2014 02:06 pm (UTC)
Sorry, no idea. I noticed that it differs from theme to theme?
It should be possible, but can't you use the code of the entry itself? Might same you some time and confusion?
portisheart
Feb. 23rd, 2014 02:17 pm (UTC)
sure, as i said already, i can style my div in the text entry/tag itself.

which means, EVERY SINGLE OF MAYBE 20-30 faq div's would look like this:


see what's time robbing and confusing?...

Edited at 2014-02-23 02:17 pm (UTC)
mangacrack
Feb. 23rd, 2014 02:21 pm (UTC)
Omfg, I can see why you need the class. And I think it should work, but experiences with Lj tell me it won't.

Luck so far?
portisheart
Feb. 23rd, 2014 02:37 pm (UTC)
nope, no luck, i tried all i could even before writing this question.. including skimming a *load of goggle links.
which is a waste of time IF it is not possible.
not even trying any more. waiting for that ONE answer to my ONE question.
is it possible, or not.
if yes, i can still figure how.
if no.. well that above, tag styling.
if nobody answers, same thing, tag style.
meanwhile, i go back to drawing ~ T_T
nomoreprinces
Feb. 23rd, 2014 07:31 pm (UTC)
AFAIR you'd need to put any new classes and ids into the theme layer itself which requires a paid account. I think LJ strips out any that's in the css file/box itself. Not 100% sure on this though as things may have changed since I last went mucking about in the theme layer nonsense.
portisheart
Feb. 23rd, 2014 09:08 pm (UTC)
THIS is exactly what i feared, thx a lot for your opinion, which confirms it! especially since i can't see it in my inspector.
i don't know enough about how a page constructs itself - aka how it manages to read the css in the head and then, somewhen between this and printing the page ready on the screen, nullifies this block of css.. but it seems it's what happens.

EDIT: [btw i have a paid account --> but...]
if it was for a constant/recurrent (rather important) item in my layout, i would have considered daring a plunge into layer nonsense ^^ - but for one single item (even if there eventually are 30 copies of it) in one single entry - NO thanks. *really really frustrated*
i wonder why this isn't mentioned anywhere (or very well hidden) - like, "guys, don't put new own classes into the css box, it won't work", simple. don't tell me i'm the 1st to think of that use ~ >_< ~
thank you! ^^

Edited at 2014-02-23 09:10 pm (UTC)
fiddlingfrog
Feb. 25th, 2014 06:39 pm (UTC)
You can put your own classes into the custom CSS section. I've done it before, and looking at an old entry the custom classes I included work fine. You can see for yourself in this entry of mine - the red border around the code examples is done with a custom CSS class name.

Without seeing the entire custom CSS you're including, my guess as to why you're having trouble is that you're using the .classname shorthand. A classname preceded by a period only will apply those rules to the last element specified. So if your code looks like this:

then your "faqGreen" rules will only apply to anchor tags with the class "faqGreen".

To make sure your rules are applied to divs, change your CSS to:
portisheart
Feb. 26th, 2014 03:54 am (UTC)
thanks for your answer!

actually, as i started reading it, i was almost happy.
just happy to know custom css worked - because in fact it was a good thing it didn't in this particular entry in a way - it would have been overloaded, i realized afterwards. so not using any border was far better ~
and i learned something with your advice - i didn't know about this precedence fact.

but still, i tried out your solution - being almost sure in the back of my head that i already HAD tested this myself as one of the first alternatives.. (without knowing about the precedence, i tried a couple of possibilities about how to call the element..)

and it DIDN'T work. same as always. i even tried to place this css code bit right at the top of my css panel, where nothing could "influence it" - nope. added !important on border and bgd - nope. took the rounded border away.. nope.

no idea what the problem is ~ maybe the layout, maybe my other overrides..

i will try tomorrow on my own private journal, just cuz i'm curious - not now it's *yawn* 4:54am..

it's paid account, but a community. i don't think it's relevant..
fiddlingfrog
Feb. 26th, 2014 04:24 am (UTC)
* Please post the entire custom CSS you're attempting to use.
* What base layout are you using?
* Can you provide a link to an entry where you're trying to use your custom classes?
portisheart
Feb. 27th, 2014 11:56 am (UTC)
well, finally i tried on my own lj, not the community's:
1) i used "blah" as a class (there was like 0,1% chance faqGreen would have been reserved or something) -> nope.
2) i copied YOUR howto in entry + css (first, it worded with you, second the block wasn't shorthand but separed in color, px, style) - nope.
just to make sure that it wasn't because of the word "faq", or a community page.

my own journal is portisheart but where i wanted this was in my new community andromedia3d.
the style BOTH use as a base for the layout is Expressive - River at Night.

but while it's still quite visible on my own lj in spite of quite a bit of css overrides, when you look at the community page you wouldn't think it's the same base - i changed all the colors, the nav etc (the only reason i used the same base was i had my code/overrides to build upon).

if you go on the community page and get the source code, you'll see the overrides in the HEAD section.. if i upload it here you will have to scroll 10x, and it's easier to read it from a different browser tab, isn'it?

the community is members only and save for the intro, the (yet nonexistant) entries are locked. but i opened my test entry to public so you can see it.-> here
fiddlingfrog
Feb. 27th, 2014 02:42 pm (UTC)
Please paste your CSS here into a textarea. I want to make sure that what you're putting into the customization area is what is making it to the rendered page in the browser.
portisheart
Feb. 27th, 2014 07:16 pm (UTC)
i can't. -->

***
Sorry, but your comment of 14445 characters exceeds the maximum character length of 4300. Please go back, shorten it, and try posting it again.
***

but i looked again at the page source - and this div.faqGreen css block is the first thing i see in the /* Cleaned CSS: */ ... it is there!

i haven't controlled if everything else is in the source 1:1 with my panel, but the rest works absolutely fine.
(Deleted comment)
portisheart
Feb. 28th, 2014 08:33 am (UTC)
you're right! i didn't see it. ofc i controlled in my entry editing interface (and it still IS THERE, untouched).. but why didn't i notice it on the page..?? i tried checking the box to disable automattic formatting - the entry test is a mess now, but with the inspector i saw yeah, it's still stripped. :/
( 15 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars