In order to post, you must be logged in and have a membership.

Home Forums Course Discussions Link Color In Widget

Viewing 7 reply threads
  • Author
    Posts
    • #2281
      Stephen Nicholson
      Participant

      In setting up my first template, I want to add a column in a footer section to display a list of Categories.

      I used the WordPress / Widgets / Categories block in a column and it displays the list of categories as I expect.

      However, I cannot adjust the text formatting for the category links - they display in the global style; any typography changes only apply to the widget heading and the bullets, not the text in the list.

      How can style the list text within the widget?  I really just need control of the text color.

      Alternatively, is there another block with more functionality that I should use to display a list of categories?

    • #2282
      Jonathan
      Keymaster

      Hi there,

      Usually when I can't get a link color to change I use a code block and in the CSS tab, take the element ID from the widget in question and add an a tag. Then change the text color to whatever I want.

      So for instance, it would be something like #widget-124-8 a {color: #000000;}

      Alternatively, you can use a code block and the PHP tab to output your categories using custom code, which won't require you to use a widget.

      Let me know if this helps

    • #2290
      Stephen Nicholson
      Participant

      Hey Jonathan!

      Thanks for your reply. That's excellent; it pointed me in the right direction.

      I've implemented a code block option to output the categories.
      <div class="line number2 index1 alt1" style="font-family: Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; color: #555555; box-sizing: content-box !important; margin: 0px !important; padding: 0px 1em !important; border: 0px !important; outline: 0px !important; vertical-align: baseline !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border-radius: 0px !important; inset: auto !important; float: none !important; height: auto !important; line-height: 1.1em !important; overflow: visible !important; position: static !important; width: auto !important; direction: ltr !important; box-shadow: none !important; white-space: pre !important;"><code class="php plain" style="box-sizing: content-box !important; padding: 0px !important; border: 0px !important; outline: 0px !important; font-size: 1em !important; vertical-align: baseline !important; background-image: none !important; background-color: initial !important; border-radius: 0px !important; inset: auto !important; float: none !important; height: auto !important; line-height: 1.1em !important; overflow: visible !important; position: static !important; width: auto !important; font-family: Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; direction: ltr !important; box-shadow: none !important; display: inline !important; color: black !important;">

        </div>
        <div class="line number3 index2 alt2" style="font-family: Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; color: #555555; box-sizing: content-box !important; margin: 0px !important; padding: 0px 1em !important; border: 0px !important; outline: 0px !important; vertical-align: baseline !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border-radius: 0px !important; inset: auto !important; float: none !important; height: auto !important; line-height: 1.1em !important; overflow: visible !important; position: static !important; width: auto !important; direction: ltr !important; box-shadow: none !important; white-space: pre !important;"><code class="php spaces" style="box-sizing: content-box !important; padding: 0px !important; border: 0px !important; outline: 0px !important; font-size: 1em !important; vertical-align: baseline !important; background-image: none !important; background-color: initial !important; border-radius: 0px !important; inset: auto !important; float: none !important; height: auto !important; line-height: 1.1em !important; overflow: visible !important; position: static !important; width: auto !important; font-family: Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; direction: ltr !important; box-shadow: none !important; display: inline !important;">        <code class="php plain" style="box-sizing: content-box !important; padding: 0px !important; border: 0px !important; outline: 0px !important; font-size: 1em !important; vertical-align: baseline !important; background-image: none !important; background-color: initial !important; border-radius: 0px !important; inset: auto !important; float: none !important; height: auto !important; line-height: 1.1em !important; overflow: visible !important; position: static !important; width: auto !important; font-family: Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; direction: ltr !important; box-shadow: none !important; display: inline !important; color: black !important;"><?php wp_list_cats(<code class="php string" style="box-sizing: content-box !important; padding: 0px !important; border: 0px !important; outline: 0px !important; font-size: 1em !important; vertical-align: baseline !important; background-image: none !important; background-color: initial !important; border-radius: 0px !important; inset: auto !important; float: none !important; height: auto !important; line-height: 1.1em !important; overflow: visible !important; position: static !important; width: auto !important; font-family: Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; direction: ltr !important; box-shadow: none !important; display: inline !important; color: blue !important;">'sort_column=name'<code class="php plain" style="box-sizing: content-box !important; padding: 0px !important; border: 0px !important; outline: 0px !important; font-size: 1em !important; vertical-align: baseline !important; background-image: none !important; background-color: initial !important; border-radius: 0px !important; inset: auto !important; float: none !important; height: auto !important; line-height: 1.1em !important; overflow: visible !important; position: static !important; width: auto !important; font-family: Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; direction: ltr !important; box-shadow: none !important; display: inline !important; color: black !important;">); ?></div>
        <div class="line number4 index3 alt1" style="font-family: Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; color: #555555; box-sizing: content-box !important; margin: 0px !important; padding: 0px 1em !important; border: 0px !important; outline: 0px !important; vertical-align: baseline !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border-radius: 0px !important; inset: auto !important; float: none !important; height: auto !important; line-height: 1.1em !important; overflow: visible !important; position: static !important; width: auto !important; direction: ltr !important; box-shadow: none !important; white-space: pre !important;"><code class="php plain" style="box-sizing: content-box !important; padding: 0px !important; border: 0px !important; outline: 0px !important; font-size: 1em !important; vertical-align: baseline !important; background-image: none !important; background-color: initial !important; border-radius: 0px !important; inset: auto !important; float: none !important; height: auto !important; line-height: 1.1em !important; overflow: visible !important; position: static !important; width: auto !important; font-family: Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; direction: ltr !important; box-shadow: none !important; display: inline !important; color: black !important;">

      </div>
      <div></div>
      <div>Then I named the Class as 'cat_list' and set the CSS as:

      </div>
      <div>.cat_list a {color: #efedff;}</div>
      <div></div>
      <div>This raises one follow-up question.</div>
      <div></div>
      <div>Is it possible to use a Global Color name (that I've previously defined in Oxygen) within a div CSS code?</div>
      <div></div>
      <div>- Stephen</div>
      <div></div>

    • #2291
      Stephen Nicholson
      Participant

      Apologies for the html in my reply - not sure what happened

      I guess that the editor didn't like me pasting some of the code.

      I tried an edit to correct, but then I couldn't edit it anyway 🙁

      Hopefully you can interpret ok

    • #2332
      Stephen Nicholson
      Participant

      Just to reiterate, in case you missed it ...

      Is it possible to use a Global Color name (that I've previously defined in Oxygen) within a div CSS code?

       

      - Stephen

    • #2382
      Stephen Nicholson
      Participant

      While looking through some other resources, I stumbled across this Advanced Scripts Manager:

      Advanced Scripts

      One of its functions includes being able to use Global Color Names in PHP, CSS, and Javascript.

    • #2383
      Taylor Drayson
      Participant

      Hey Stephen,

      You can reference global colours in css by using color()

      So your code would be:

      .my-class{
      background-color:color(5);
      }

      Where 5 is the ID of your global colour

    • #2423
      Stephen Nicholson
      Participant

      Thanks Taylor!

      That's great.

      There will definitely be instances where it makes sense to use this type of referencing rather than hard coding a color.

      Thanks again.

      🙂

Viewing 7 reply threads
  • You must be logged in to reply to this topic.
menu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram