• The right hand column on most of my pages was made to have themed widgets. The idea was to make some relevant categories with links under them that we could add to or change any time. Though we have the widgets made, they don’t contain any links as of yet, and I can’t find an example of how to add live links under them.

    Here’s an example of what one of these widgets looks like on the far right column on my page:

    Services
    Our Specialties
    Articles
    Our Video Production Experts Write About:

    Here’s the code in the widget area:

    <ul class="group">
      <li><a href="#">Services</a></li>
      <li><a href="#">Our Specialties</a></li>
      <li><a href="#">Articles</a></li>
      <li><a href="#">Our Video Production Experts Write About:</a></li>
    </ul>

    How do I put indented lists live links under each of these categories? I’d be grateful if you could show me an example of this using my code above.

    Thanks!

Viewing 12 replies - 16 through 27 (of 27 total)
  • Thread Starter Angietops7

    (@angietops7)

    Hi Webbrewers,

    Thanks for your response.

    I do see a section where there are styles with the word “widget” in the style names, but when I’ve manipulated some of them, nothing seems to happen to the widget column. I’ll play around with it a bit more, and let you know what happens.

    Plus, where do I find the child theme? Is that in a different place than the style.css?

    Thread Starter Angietops7

    (@angietops7)

    Can I view the child theme files through the wordpress panel? I’m not seeing how to do that. Or do I need to view them directly on my godaddy hosting panel?

    You have to create a child theme, following the guide in the link.

    Thread Starter Angietops7

    (@angietops7)

    Ok – I played around with everything I could find on the style.css that seemed widget related, and nothing changed.

    When I look at the source code for a page picking up the menus I made for the widget column, I see various classes used, but I don’t see those class names in the style.css sheet. I wonder if there are other style sheets I’m not aware of?

    I went into my hosting company to view the files through file manager, and I saw a couple style sheets, but these widget classes were not there.

    So I guess I’m saying that I still have no idea where to go to change the widget styles.

    Also I read the info you linked to, but I don’t know how to access the existing child theme style sheets, if there are any on my site. When I look at the Themes on the wordpress panel, I see 4 themes, but I don’t see a way to view the files or child themes for those themes.

    I really need some basic direction, as I’m a real newbie when it comes to wordpress and it’s structure. I’d be grateful for that help.

    Thanks

    Thread Starter Angietops7

    (@angietops7)

    oh – I just saw your last post. I see you’re suggesting that I create a child theme. I’ll look at that.

    I’ll give that a try. Thanks

    Most modern browsers also have an option to “inspect element” when you right click something on a page. In the dialog that opens you can see exactly what elements/classes are in use.

    Thread Starter Angietops7

    (@angietops7)

    Hi Webbrewers, thanks for your help.

    As I said, though I can view the source code and see the names of the styles, I can’t find them anywhere I know to look. So even if I create a child theme, I don’t know what code to include, to override the parent styles.

    Plus there are also 4 themes on my site, and I don’t know which to make a child theme for.

    This would be so easy with Expression Web. For each page you’d just view the attached style sheets, and you’d know exactly where to look when you need to make a change. Every style and ID would be on those attached style sheets.

    For wordpress it seems like each page can be grabbing styles and code from all different sources, and there’s nothing telling you where things are coming from.

    Thread Starter Angietops7

    (@angietops7)

    So can anyone explain to me where all the styles are being defined for my new custom menu widgets that are on my right hand column?

    Where is the code that I need to override to style these menus?

    If you’re unable to look, then can you tell me exactly where to look?

    Please remember that I’m a newbie in WordPress, having worked in Expression Web for years. Please assume I need the basics explained.

    Thanks

    Did you try the “inspect element” option mentioned above? It will show you exactly what elements and classes are used.
    A child theme can be made for any theme – when active, WP will load up both parent and child theme but give priority to anything found in the child theme.

    Thread Starter Angietops7

    (@angietops7)

    Oh – I see what that is now. It’s very different from viewing the source. Thanks for persisting. I’m learning a lot.

    So if I use “inspect element” on the menu header “Our Services”, I see that it’s automatically assigning it as a H2. Since H2 is being used throughout the site, I wouldn’t want to alter it.

    So is there a way for me to change that menu header so it defaults to a style I create just for the headers in this custom menu?

    Also the styles that come up are numerous, and confusing. Just this one header is showing 4 different styles impacting it, plus a bunch of others that are listed as “inherited”.

    They first couple are being shown to be on style.css. When I go to there and search for the any of these items, I don’t find them. Here’s some of what I see:

    I guess even with this, I still don’t understand where these styles are being kept, and how wordpress is directed to pick up these styles.

    Multiple element id’s and classes allows you to target specific elements. It can also be confusing because css rules applied in the theme’s stylesheet may be more specific than ones you add and so your changes don’t get applied.
    For example:
    <ul id="my-ul"><li class="my-li"><a href="....">
    With this in style.css:
    ul#my-ul li.my-li a{color:red;}
    Should take precedence over:
    .my-li{color:blue;}
    So it’s important to see all the id’s and classes being used, some of which may be generated dynamically and only visible in the source code..

Viewing 12 replies - 16 through 27 (of 27 total)
  • The topic ‘How to make links inside of widgets?’ is closed to new replies.