Customizing Semiomantics NewsCast 1

01 Oct Customizing Semiomantics NewsCast 1

Customization Tips for NewsCast (Tutorial)

To start with, define a color scheme you wish to apply to the site as well as other branding elements, such as fonts and labels (logo, header title, ads).

The color scheme

For the purpose of the exercise I have created a color scheme based on a photograph:

Snow-Leopard

I loaded the photo into Photoshop and the selected 3 dark and 3 light colors which make the harmony of the photo. I added these colors to my Swatches:

Swatches

The last 6 colors represent my color scheme for the site.

Here is the list:

  • #737e84
  • #b4c2cd
  • #b9b59a
  • #dcdfd8
  • #eff3f4
  • #ffffff

As this is a rather cold color scheme, I went to look for a matching warmer background in my photo folder to find:

Astir Beach

You guessed it, it’s just another photo from Astir Beach here in Vouliagmeni .

I took the picture to Photoshop, set the transparency to 70% and resized it to 2000 x 1300 pixels and got a 120 Kb background. The pic could be made much smaller, downsizing to 1200x 900 px.

If you wish you may download the image from here.

The warm orange colors and the cold blues on the background create a nice harmony with the cold scheme on the site.

The Headerlogo is a 461 x 100 px transparent (png)  label created with Photoshop. The color selected is #737e84 from the above scheme, the fonts is some Helvetica Light Typeface. The word Semiomantics uses its own brand typeface and color # dcdfd8 from above.

NewsCast Head Logo

The style I start with is sans-default; therefore the theme image folder to use is “default” under wp-content/theme/newscast/styles. I load the header logo into that folder.

Next I edit header.php from the theme folder (under wp-content/themes/newscast) and I change in line 45 the link to the image (default/logo.png).

That’s it.

The CSS Style-sheet

Let’s start working from outside to inside. We start with the external background and site default settings for fonts and font color.

Also we create a back-up of the original sans-default style-sheet and then rename the style-sheet to a name of our choice, in my case yorgo 1. In the Theme Editor ( WordPress dashboard) I enter now on top under style “yorgo1″ (without the quotes), which identifies my custom style-sheet. This style-sheet links to the default image folder under the theme styles.

Background

I edit the style-sheet in PSPad. The first few lines read:

< blockquote >

body {
background:#eee;
font: 1em/17px arial, verdana, tahoma, sans-serif ;
color:#222;
}

Have a look at the background line:

background:#eee;

I want to insert my background, which I have loaded into the default image folder as per above and I want to change the default background color to a color close the the color of the background image .

Here a style idea: you could load a background color which contrasts with the photo and load the photo with more or less transparency in png format :-).

To add my background image I need to add the image link, to change the color I just replace the background color code, for example:

background:#fdc689 url(default/logo.jpg);

I have now added my image, however I would like to position it in a way that it aligns with the bottom and is centered and I don’t want the image to be repeated (tiled) in case the site is viewed on a mega screen (loading time and aesthetics). Also I would like my blog to scroll over that background image in order to prevent the background to end before the site in case of vertical scrolling:

background:#fdc689 url(default/logo.jpg) bottom center no repeat;
background-attachment: fixed;

My first few lines read now:

body {
background:#fdc689 url(default/logo.jpg) bottom center no repeat;
background-attachment: fixed;
font: 1em/17px arial, verdana, tahoma, sans-serif;
color:#222;
}

Default Font

The last two lines of our piece of code define the default font, size and font color. I like to change the font family as well as the color. This is done by just modifying the existing expressions:

body {
background:#fdc689 url(default/logo.jpg) bottom center no repeat;
background-attachment: fixed;
font: 1em/17px helvetica, tahoma, sans-serif;
color:#535c61;
}

The color selected is a darker version of the darkest color in my above color scheme.

Titles and Headings

The next part of the style-sheet deals with defaults for headings and titles. Heading tags are h1, h2, h3, … and they are used to make titles more visible not only to visitors but they also impact on search engine spiders.

I define the color of my headings using the same color I used on my Blog Title Logo, i.e. #737e84.

In fact, all places where the color #222 is used on the original style-sheet should be replaced with code: #737e84.

To do this, I just use the search and replace tool from PSPad:

  1. Highlight #222 on line 8 of the original style-sheet
  2. In PSPad top menu select Seach … Replace
  3. Fill your new color into the second line
  4. Tick “Whole Words Only”, “Entire Scope” and “ Global
  5. Click OK

That’s it, all dark gray (#222) colors have been replaced with the color of my choice throughout the entire style-sheet.

You may proceed in the same way to modify any basic color of the default style-sheet to your taste rapidly.

Special Case: Featured Title

The featured category is on display on top left of the layout where you see the large image slider.

The Title shows white on a background simulating a transparent overlay. Simply speaking, the title displays on a background which is made up of tiled partially transparent png images. The image is located in your default folder under the name of: bgTransparent.png.

You can edit or create a similar picture with a color of your choice and replace thus the existing image. Just make sure you create a transparent png 30×29 px an.

As I would like to adapt the background to my theme colors, I just create such an image in Photoshop and load it in replacement of the existing image.

bgTransparent.png

bgTransparent.png

Great result:

NewsCast Colors

NewsCast Colors

If you select a light background color, you would probably change the font color to a dark tone.

The corresponding code reads:

h2.featuredTitle {
font-size:20px;
line-height:1.1em;
background: url(default/bgTransparent.png);
width:480px;
padding-top:7px;
padding-bottom:7px;
color:#fff;
position:absolute;
z-index:2;
bottom:0;
}
h2.featuredTitle a {
color:#fff;
padding-left:10px;
padding-right:10px;
display:block;
}
h2.featuredTitle a:hover {
text-decoration:underline;
}

That’s it, more later.

1Comment
  • Yorgo Nestoridis
    Posted at 17:52h, 01 October Reply

    Less than two minutes to storm Google Top 10:
    NewsCast on Google Top 10
    Interesting: Rank #3 is my site at Joe Cettina’s Ceguna built on Semiomantics!
    Go for Semiomantics High Speed Developments :-).

Post A Comment