WordPress.org

Ready to get started?Download WordPress

Forums

Suits
[resolved] How to change id or class in html (8 posts)

  1. a.scaltritti
    Member
    Posted 5 months ago #

    Hi,
    I'm pretty new in WordPress and it seems great.

    Unluckly I can't find out how to edit the XHTML code. (I can't find it!)
    I have a menu bar with the classic Home, Products, Contacts drop-down menus.
    I wolud to change the color in my "Contacts" button.
    So I should find out something as:

    < ul >
    < li >Home</ li >
    < li >Products</ li >
    < li >Contacts </ li >
    </ ul >

    After I should add a class or an id to my Contacts button so I can make it background-color: #ff0000; in my .css file.

    But I can't find out the code! I mean, where is specified the
    - li - or - td - code?
    Thanks a lot!

    Alessandro

  2. Josh Stauffer
    Member
    Posted 5 months ago #

    Hi Allessandro,

    Can you provide a link? If you are using Chrome you can use the Chrome Developer Tools to inspect the element. Just right click on the element and select "Inspect Element" to find the class or id.

  3. a.scaltritti
    Member
    Posted 5 months ago #

    Sorry, I can't provide the link.
    I don't need to find out the class or id but I need to change it.
    So, basically, I would find where HTML tags are in the WordPress docs to change them.
    I have a folder with all php and css file but I can't find the html code of the drop down menu.

  4. Marvel Labs
    Member
    Posted 5 months ago #

    Hey Allessandro,

    The html webpage is built using several php and css files. If you want to change the design of the menu, you can customize your header.php file.

    Marvel Labs

  5. a.scaltritti
    Member
    Posted 5 months ago #

    Yep, but in header.php there is not something like:
    < ul >
    < li >Home</ li >
    < li >Products</ li >
    < li >Contacts </ li >
    </ ul >

    It's just:
    <div id="page" class="hfeed site">
    <header id="masthead" class="site-header" role="banner">
    " title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
    <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

    <div id="navbar" class="navbar">
    <nav id="site-navigation" class="navigation main-navigation" role="navigation">
    <h3 class="menu-toggle"><?php _e( 'Menu', 'suits' ); ?></h3>
    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    <?php get_search_form(); ?>
    </nav><!-- #site-navigation -->
    </div><!-- #navbar -->
    </header><!-- #masthead -->

    <div id="main" class="site-main">

    I can't understan it, sorry.

  6. Jesin A
    Member
    Posted 5 months ago #

    You don't have to edit a single line of code for this. Go to Appearance > Menus, click screen options on the top right, check CSS Classes.

    Under Menu Structure expand the menu and fill in your class names in the CSS Classes (optional) field.

  7. a.scaltritti
    Member
    Posted 5 months ago #

    Thanks @Jesin A!
    Exactly what I was looking for.

  8. Jesin A
    Member
    Posted 5 months ago #

    You're welcome!

    That's the specialty of WordPress, you can do so many things without touching the code.

    If that answers your question please mark this topic as resolved.

Reply

You must log in to post.

About this Theme

About this Topic