Custom CSS Class Problem
-
Hey Laytheme Community,
I feel kinda stupid about this, but somehow it seems i miss something really essential here. I searched the forums for a solution but couldnt find it yet.
I want to give a textframe a black background.
From my understanding, I would give a text frame a CSS class and adjust the background color using that class.
However, if I apply the custom CSS class it doesnt seem to do anything. Using the inspector, I also cannot see the CSS class.
What am I doing wrong here? I am pretty sure the CSS class name should be unique.
Find the Testpage here: https://richardlennox.de/customcss
Thanks in advance for any hints and sorry for the superbasic problem.
-
Dear @robochicken
"sorry for the superbasic problem."
No worries! we are all learning 👍
You can set a class or ID for your element:myclassblackbg
.But how do we really know if it's a class or an ID?
We fix this with CSS Selectors
When we define the CSS, we also need to define if thismyclassblackbg
is a Class or ID (or attribute etc).myclassblackbg
is a Class = We use the selector.
Ifmyclassblackbg
was an ID = we would use the selector#
You can see a list of selectors here:
Therefore you CSS :
myclassblackbg{ background-color:black; }
needs to be ( the . in front to define it's a class ):
.myclassblackbg{ background-color:black; }
Hope this helps @robochicken Have a wonderful day ✨
Richard
-
Thank you big time for the thorough feedback.
That did exactly what I wanted and I learned a valuable lesson :)
-
Have a great day @robochicken thanks for supporting Lay Theme !!
4/4
Need custom programming for your Lay Theme site?
I regularly add new features to Lay Theme for free, based on user feedback. But if you or your client need something more specific, I’m happy to offer custom paid programming tailored to your project.
Email info@laytheme.com with the subject "Custom paid programming for Lay Theme" and a short description of what you need — I’ll reply with a cost estimate.
Custom features I build often make it into future Lay Theme updates, so your idea might benefit the whole community.
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it