-
Posts
-
Would anyone be able to help/advise me on how to create a CSS class, please? I am desperate lol
All I want in life is
<strong>text in #b49a5d colour on a particular page and I assumed the best way to do this is to create a CSS class and “apply a custom ID Attribute to the section, so you can apply a unique style via CSS”. Am I right?I get the very basics of setting colours in CSS code, but I don’t know how to create the right goods here. And I am not 100% sure where to put it even if I had all the code.
Is anyone able to assist me here??
Love and possibly a few $$$ waiting if you can! :)
Hey WordPressed,
Please provide a link to the site/page that you need help with.Best regards,
Jordan ShannonHi Jordan, here it is. I just mainly want to know how to do this kind of thing. I have done lots of Googling too but not sure I’ve really got the grasp of it properly.
Hi,
What specific text do you need styled? It can be done via the quick css section in Enfold Options. Let me know the exact sections you need styled and I will make the update for you.
Best regards,
Jordan Shannonif you have your editor on a text-block element you can see the image :
(Click it to enlarge the image)
On the text-editor you can insert your wanted Text. Mark the text you want to have bold and click on that little B of the menu after that mark again the word/s and klick on that little arrow besides the A – you can choose a predefined color there or choose to click on individuelle (on german – don’t know what is on an english GUI there) A little Window opens where you can paste in your HexCode of your color. Voila the Font is in your color and bold
Klick on that tab of text-editor beside the Visual mode there is the text mode – after that you can see what inline code was inserted.
Under the red separator (to have only one image to upload) you can see the alternativ view of what have been done.Down under the line there is your other possibility – just surround your text with that code with span – the class name you give is your turn. I’m a lazy boy – so it gets the class name b49a5d but it could have been Extracolor too.
Goto your Enfold – General Styling – Quick Css filed and put in:
.b49a5d { color: #b49a5d; font-weight: bold; }Classnames have a point (punctuation dot) infront of the name , IDs have that # infront (only a few haven’t – which are the common one (like body, html, span, p, div etc)
Jordan, thank you for your offer to help here.
The page I’m working on just now is in the link attached. Bear in mind, I am only wanting this gold colour on that page only. Gold bits should be:
*Bold text
*Pricing table buttons/headers
*Other incidental items like box icons and stuff (although I did change them ok)
*Anything on that page that is currently orange (theme colour)Guenni007
Thank you for your kind, kind help there. I have found that changing the bold colour in text editor doesn’t work and the published bold text is still in line with the theme colours. Also the class you wrote, thank you again, would then apply site wide, wouldnt it? I only want these colours on one particular page.Hi,
Add the following to quick css:
.postid-36 .iconbox_content_container p strong{ color:#b49a5d!important; } .pricing-table li.avia-heading-row{ background-color: #b49a5d!important; border-color: #b49a5d!important; } .avia-button.avia-icon_select-no.avia-color-green.avia-size-x-large.avia-position-center{ background-color: #b49a5d!important; border-color: #b49a5d!important; } h2 .special_amp{ color: #f05a1a!important; }Best regards,
Jordan ShannonThank you very much Jordan, seems to be doing the trick!
Two very small things.The top of the featured column in the pricing table remains orange.
And also the “&” symbol in one of the headers remains orange too. Any way to change these too, please?Hi,
Add the following:
.pricing-extra{ background-color: #b49a5d!important; border-color: #b49a5d!important; } h2 .special_amp{ color: #b49a5d!important; }Let me know if this corrects the two remaining issues.
Best regards,
Jordan ShannonHi,
Great I am glad I can help. If you need anything else, be sure to start a new thread and just let us know here in the forums.
Best regards,
Jordan ShannonHi Jordan, sorry to bother you with this again.
I replicated the code you wrote in order to apply to a different/new page, post ID 54.
Since I added the code for post ID 54 the “&” sign in the headings and the table headers on post ID 36 have taken on the colours of the code for post ID 54.
I have pasted the Quick CSS code I have in the PC below for you to see.
Sorry, I know this must be annoying, but is there any way you could help me have the separate colour arrangements for the different pages? There are 4 more pages to do that will also likely have different colours too.
Many thanks in advance for your help.
Hi,
Please stop with the “Come on” I am trying my best to help you out.
Now, the best thing to do would be first over look your css and make sure there are no errors, and that the last piece of css on the page is reading. If it isn’t then that indicates and error somewhere. That code that I gave you before should apply to the other pages by changing the page id.
Best regards,
Jordan ShannonJordan, my apologies, I just find the sheer volume of issues I’m having with Enfold to be so overwhelming, and the time it takes to get responses so long, that when the content you want is already provided in the thread, I find it frustrating to be asked again and have to wait another 1-2 days for more progress. No intention to offend you personally but I’m really struggling to work with Enfold when so many things constantly break and it takes so long to get problems solved, however I also appreciate how busy you all are so, again, no intention to offend, just a bit stressed out with it all.
I appreciate you are trying to help, so thank you.
Problem is, I don’t understand or write CSS which is why I was so grateful for you writing that code for me. I realise you are not here to write code for people and that you did me a huge favour, but the issue is I cannot fix the problem I’m having by coding the solution.
The code you wrote does work, the problem is it’s being applied to more than just the one page it was intended for. Are you able to see in the code why post ID 54 code is being applied also to post ID 36 page?
This is a showstopper for me, I need to get the colours right on each page or I’m truly stuck. Hope you can assist, and thanks again.
Hi Jordan, sorry for the delay reply.
In short, no, each page in the portfolio section will have a separate, subtle, colour scheme:
Weddings – Gold
Festivals – Purple
Christmas Parties – Red
Halloween – Green
Functions and Parties – Blue
Acoustic Duo – Brown
I haven’t defined hex codes for all yet but can do if you needed them.I would want to change small elements of these page’s colours:
The “&” sign in headers
Table headers and buttons (although buttons can be done in the visual editor ok)
Text that would be in<strong>tagsThats about it for now, as everything else (I think) can be done in the editor.
Currently the code you kindly gave me, when copied and pasted, overrides the code before it and all portfolio pages take on the colours of the last piece of CSS.
I wondered if you might assist me in creating a code that allows me to dictate the colours of theme elements on each page separately? Ideally something I can copy and paste and just change the key aspects like page ID and colour codes. Is that possible, do you think, please?
Ummm, think I solved it, just added .postid-36 to the beginning of each line of code you had provided.
Sorry. That was easy :/
Thanks Nikko and Jordan.
Would you be kind enough to tell me what the CSS name is for the “load more” button on a masonry gallery? I want to change its colour too.
To try and save asking I looked in the page source and found this “av-masonry-pagination av-masonry-load-more”, but this doesn’t work. Is this not the name I’m looking for then? Is there anywhere I can go to find the name of all the various elements within Enfold should I want to change anything else?
Cheers.
- You must be logged in to reply to this topic.