Edit a Theme using css

  • wayneoz

    (@wayneoz)


    5 years, 2 months ago

    Hi,
    Hope someone with CSS knowledge can help. I have been able to do this in previous themes but unable to do it now!

    I want to Change the TEXT (Regions) to (Map Areas) on the front end ( Can’t be done in Editor) as it’s in the theme.
    When I inspect element in firefox I can find the Element as this:
    <i class=”mi bookmark_border”></i>Regions

    SO I can Change it here to what I require. My Thought is that if I can change it in inspector, then all I need to do is put the correct CSS functions in Customise aditional CSS of the Theme.

    I have this so far:

    .finder-tabs .nav
    .regions #regions;

    But I don’t know what to add to change the Text!
    Am I anywhere close?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Vlad

    (@vladytimy)

    5 years, 2 months ago

    Hi, @wayneoz

    My Thought is that if I can change it in inspector, then all I need to do is put the correct CSS functions in Customise aditional CSS of the Theme.

    That is correct, but CSS rules are mainly to set a webpage’s design and layout, not its content. Sure, there are certain tricks, such as the :after and :before selectors that support content atribute, but in your case I can’t see that as a solution, because you also need the icon (mi bookmark border thing) and HTML tags can’t be included in content property.

    The most you can do is add some extra word. Here’s a woring CSS selector for that element.

    #c27-explore-listings #finderSearch  li:nth-of-type(1) a:after {
    content: " areas";
    background:none;
    margin-left:5px;
}

    The correct way of doing this is to edit the HTML generated, not the CSS. And that can be done via your theme only. Maybe it provides an option to change that theme, or maybe it can be “translated” using a translation plugin.

    Since you use a commercial theme (MyListing), please go to their official support channel. We feel they are best equipped to support their products.

    https://themeforest.net/item/mylisting-directory-listing-wordpress-theme/20593226/support

    Forum volunteers are not given access to commercial products, so we would not know why your commercial theme is not working properly. Commercial products are not supported in these forums.

    Kind regards!

    Thread Starter wayneoz

    (@wayneoz)

    5 years, 2 months ago

    Hi,

    Thank you very much for your detailed reply. Much appreciated.
    Wayne

    Vlad

    (@vladytimy)

    5 years, 2 months ago

    Happy to help!

    Just a note. If you used before, instead of after, there’s no need for this line of CSS:

    margin-left: 5px;

    You can get rid of it! 🙂 But of course, this is a temporary solution, until you find a fix from your theme developers.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Edit a Theme using css’ is closed to new replies.