MH Magazine – Few CSS pointers needed

• 

  npandersonuk · Member · May 25, 2015 at 12:24 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I was looking to do the following to the MH Magazine Theme:

  – is it possible to get some ‘definition’ around the Custom Posts (in particular) but other widgets too….either a shadowed box, changing the colour slightly etc.
  – along the menu, I can either get upper or lowercase letters – but not an uppercase first letter followed by subsequent lowercase letter
  – can I change the colour block on the news ticker?
  – can you get ‘texture’ into the widget titles as well as changing the colour?
  – any css out there to change the images of the social media icons?
  – any icons or text that sit within the header (i.e. links to social media, can these be icons or at least change the default grey box?)

  Many thanks

  The blog I need help with is: (visible only to logged in users)

• 

  staff-jeanpierreac · Staff · May 25, 2015 at 1:05 pm

  • Copy link

  Hi!

  – is it possible to get some ‘definition’ around the Custom Posts (in particular) but other widgets too….either a shadowed box, changing the colour slightly etc.

  I think this is gonna be possible, but -sorry for this answer- what’s a custom post? (And what do you exactly want as both boxes and color change are possible?)

  – along the menu, I can either get upper or lowercase letters – but not an uppercase first letter followed by subsequent lowercase letter.

  You can do this.

  .main-nav li a {
      text-transform: capitalize;
  }

  – can I change the colour block on the news ticker?

  – can I change the colour block on the news ticker?

  If I understand, you would like to change the background color of the ticker tape. If so, you could use this css code (This uses green):

  #ticker {
  background-color: rgb(0,255,0);
  }

  – can you get ‘texture’ into the widget titles as well as changing the colour?

  I am not sure to understand what you mean with texture. Something like a shadow? If so, this is for an aquamarine color. You can change it by another color name or rgb defined (You could take a look here to choose a color).

  .wt-layout2 .widget-title, .wt-layout2 .footer-widget-title {
      color: aquamarine;
      text-shadow: 3px 3px 5px;
  }

  – any css out there to change the images of the social media icons?

  Sorry, I’m not sure this could be done. At least, I do not know how to do this only with css :(

  I hope this helps you.

• 

  staff-jeanpierreac · Staff · May 25, 2015 at 1:24 pm

  • Copy link

  About custom posts. If they are “popular articles”, you could do with a little bit of css code:

  In the following example:

  -background-color statement is used to fix a slightly gray background.
  -border: is used to fix a 1px width in the same blue color as title bars.
  -If you define a border I think you should add a little separation to avoid text and border be to close. These are those 5px defined by padding.

  ul.cp-widget.clearfix
  {
      background-color: rgb(250, 250, 250);
      border: 1px solid rgb(0, 184, 230);
      padding: 5px;
  }

  You could also add a shadow, changing to your needs and preferences, with a code like this:

  ul.cp-widget.clearfix
  {
      box-shadow: 10px 10px 20px rgb(0,184,230);
  }

  I hope this helps you.