WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Firebug says edit element.style, can't seem to find it! (8 posts)

  1. greg.a.pfeffer
    Member
    Posted 1 year ago #

    Hello,
    On http://www.greek-life-apps.com.... I'm using the FreshServe theme...

    I’m trying to move the "Take a Video Tour" button over to the right and upwards some, so it looks good with the rest of the page above the fold. I’d modified everything else using FireBug and modifying style.css, but I can’t seem to find how to move that element…instead of having it in style.css, it says element.style which makes me thing its CSS is written in-line in the HTML…but where do I find the HTML in the FreshServe theme to edit? I’ve looked in index.php and header.php, cant seem to find!

    Thanks in advance!

    Greg P.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The relevant CSS for that button is:

    a.button {
        use margins here;
    }

    It's getting overridden by "yellow-red.css". But do be aware that any changes you make to theme files will be overwritten and lost when your theme is updated. It's recommended to use a child theme or custom CSS to avoid that.

  3. paulwpxp
    Font hero
    Posted 1 year ago #

    Maybe a little more specific like

    .info .button.icon {
    
    }

    since this is only for that one location.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    You can use a browser developer tool to expose the styles for you.
    You don't need to then look for where those styles originate. All necessary information has been exposed by the developer tool, for which you can then override them in a Child Theme stylesheet or Custom CSS plugin.

  5. greg.a.pfeffer
    Member
    Posted 1 year ago #

    Hi All,
    I created a child theme (freshserve-child) and created a custom style.css, with this included

    @import url("../freshserve/style.css");
    
    a.button {
        margin:250px;
    
    }

    Still doesn't seem to be working. margin:250px seems to work in firebug for moving the item over to the right, but I can't seem to move it up for some reason...

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You need to use 4 margin measures: top, right, bottom, left:
    or use specific margin-right: XXpx;

    For all i.e.:

    a.button {
        margin: 10px 5px 10px 250px;
    
    }

    Obviously those are just random numbers - adjust accordingly. And BTW, you CAN use negative margins to move "backwards."

  7. greg.a.pfeffer
    Member
    Posted 1 year ago #

    WPyogi-

    I managed to add margin-left:

    a.button {
        color: #FFFFFF;
        font-size: 12px;
        font-weight: bold;
        margin-left: 200px;
        padding: 8px 15px 10px 0;
        position: relative;
        text-decoration: none;
    }

    But negative margins don't seem to have any effect on the up/down...

    Any idea whats going on?

  8. greg.a.pfeffer
    Member
    Posted 1 year ago #

    Sorry to just clarify, I added

    ` margin-left: 200px;

Topic Closed

This topic has been closed to new replies.

About this Topic