How to Style Shortcode Elements

[scottmriley]

Hello,

It seems that Laura may be done with me, and I’ve received very little help with some important issues.

Right now I REALLY need to know how to style the Divider with Icon short code elements!

I’ve placed short and long dividers with icons between various sections on my Home or Front page. The elements are gray. I changed the background color of the page and the elements’ lines are no longer visible. Secondly, the gray icons are very difficult to see and I want them and the lines to be styled in the following color, #4d151d. I styled my fonts with that color and they are showing fine.

I tried changing the colors in theme options/styling options/main and alternate to no avail.

PLEASE HELP!

[sharmstr]

try this css

COPY CODE

[class^="icon-"]:before, [class*=" icon-"]:before {
  color: #4d151d !important;
}
.hr-title {
  border-color: #4d151 !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[scottmriley]

Thank you sharmstr. That worked for the icons, but the divider lines are still not showing. If .hr-title was intended for the lines, it did not work.

I will probably stay with this color throughout the site, but if I want to change it on an individual page, or section, should I use the class name “icon-“, and then paste the code in the page css?

Will I need to contact you for the code every time something like this comes up? Can you provide me with a way to view the main css? It would make it much easier for me to work with this theme! I understand that it cannot be modified. I just need to view it for reference.

[scottmriley]

I would make all of my changes in the child theme or on the individual pages (if I can get them to work – I haven’t had any luck so far).

[scottmriley]

One other thought. Is there some sort of z-index associated with the divider lines? Could the background color change have covered them up, so to speak?

[sharmstr]

There was an error in the code I gave you. Look at #4d151. It should be #4d151d

You can figure it out by yourself by right clicking on the element and using your browsers dev tools to inspect the element.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[scottmriley]

Okay – I see that and changed it, but still no change in the display.

[sharmstr]

It works. I’ve tested it. See screenshot. So either you entered it wrong, your site is caching changes or something else is interfering with the css. If you provide a link I’ll be happy to look.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[scottmriley]

Okay – I don’t know. Here’s the site http://itoto.org

Do you need wp-admin credentials or ftp? I’ve provided them a couple of times now.

[scottmriley]

Also, remember I’ve said that I changed the background color, so maybe there is a z-index issue?

[scottmriley]

And… this is a shortcode so maybe it isn’t set up as a horizontal rule. There is a choice in the options panel to change it from full to long to short.

[sharmstr]

I’m aware of all of those things. That image was from the divider sample page which is nothing but shortcodes. The reason I gave you .hr-title is because it will style all possible options. Its not a z-index issue. See attached.

I dont have the time to continue to prove that it works. If you’d like me to help you solve your issue, provide a link.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[sharmstr]

Are your theme options changes taking effect anywhere? Really all you need to do is set the border color in alternate, then set your row to use the alternate style. If that’s not working, perhaps your having a theme options issue. If so, we should fix that.

If you have your child theme enabled, you can put the css I gave you in /kleo-child/styles.css instead. That will bypass theme options.

Perhaps some of the other custom css you’ve added is overriding it.

Again, its hard to know for sure without seeing it.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[scottmriley]

Wow, chill… I tried to provide a link in my last reply. What do you need? Please be more specific about the link.

Here is the “link” to the website home page again, where the issue resides. I asked if you needed something else. If you do, please tell me what.

http://itoto.org

[scottmriley]

All good guesses, but I haven’t inserted any other css. Yes, I did put the code you sent in the child theme stylesheet and I fixed the error when you mentioned it. I did put the border color in alternate, but what do you mean about setting the row to use it? I set the same border color in the row options on the page. I only changed the background color for the row though, because I don’t want the entire page that color.

[sharmstr]

Thank you for the link. Now I can tell you why its not working.

For some reason, the devs have set the .hr-title border to none and with !important when you set the row to use a custom font color (doesnt happen with just a custom background color). Not sure why they did that.

Now, you need to decide if you want to make these hr changes globally or just on that page. If you want all of this css to effect the entire size, put it in styles.css. If you want to change it just for this page, click on the gear icon at the top of the VC container and add the css there. Here’s everything. Let me know if it works.

COPY CODE

[class^="icon-"]:before, [class*=" icon-"]:before {
  color: #4d151d !important;
}

section.custom-color .hr-title abbr {
  background-color: rgba(206,167,75,1) !important;
}

section.custom-color .hr-title {
  border-top-width: 1px !important;
  border-top-style: solid !important;
  border-color: #4d151 !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[scottmriley]

Thank you for your efforts here sharmstr.

The lines show, but the little bg element color doesn’t blend with the page and the line seems to show through. I adjusted the rgb to match the actual page bg and it was still too dark. I tried taking the bg element out, but the lines then strike through the icon. Please take another look and see if you can tell what is happening:

http://itoto.org/

Thank you.

[sharmstr]

I talked the developers and that is an example of why they set the border to none… because they didnt like the way the hr’s looked. Anyhow, if you can live with the hr going through the icon, set the opacity on the appr to match the background. Otherwise, set everything to rgba(219,192,127,1) which is the same as rgba(206,167,75,0.7)

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[scottmriley]

I found the problem. I had the bg alpha setting for the row at about 60%. I brought it back to 100% and matched the css color with the row color and it looks great! Thank you very much!!

[scottmriley]

sharmstr – so again, thank you for your awesome help! There is only one small problem remaining and I’ve tried to figure it out, read through similar posts, experimented with every option I can find and tried using some custom css on the page that Laura had sent earlier… no luck.

When we changed the shortcode elements color, the cart and search icons in the header changed to the same color (see the attached screenshot). Is there a way to get them back to the white, as they were before we styled the shortcode elements?

One other thing, I’d like to have a log in drop down link in the header following the icons. Just “Log In”, with username and password fields in a drop down. Can that be done?

Again, the link is http://itoto.org

Thank you so very much!!

Attachments:

You must be logged in to view attached files.

[sharmstr]

.cart-items i:before {
color: #fff !important;
}

.search-trigger i:before {
color: #fff !important;
}

Can’t have it after the icons without some custom coding. Delete ‘my account’, add the ‘my account’ from Kleo then change the title to Log In. It will launch the kleo login modal. But your site is throwing jquery errors so it wont work until you fix that.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

Well, the error is on the home page. Also, turn off transparent main menu at the site level. Only turn it on for pages where it makes sense.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[scottmriley]

The icon color issue resolved. Thanks!

The jQuery errors were probably from some code Laura sent for header changes that I tried. I just removed it all. Are the errors still there?

[sharmstr]

nope

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[scottmriley]

Great. I actually don’t think I need the custom log in, so thanks again sharmstr!

[Author]

Posts