Home » CSS
Category Archives: CSS
01 Website design CSS 3 Primer
CSS is an abreviation of Cascading Style Sheets. It’s purpose in web design is the HTML elements will appear on the chosen media. For example a printer, a PC display or mobile phone. Maintenance or updating of a complete website design can be changed by editing one file or stylesheet, often named style.css, but can be of a person’s choosing. There are a number of modules defined in CSS 3. These posts will document them
- The Selectors
- The Box Model
- Backgrounds and Borders
- Image Values and Replaced Content
- Text Effects
- 2D/3D Transformations
- Animations
- Multiple Column Layout
- User Interface
Using CSS 3, how can I make my website logo image fade in
Let’s assume your image has an id tag called logo in your html
<img id=”logo” src=”/img/mylogo.jpg”>
All you have to do is add this CSS to your style sheet, the duration of fade in is 3 seconds. Obviously you can set the starting opacity to 0, i.e. invisible or to something like 25%, e.g. opacity:0.25, so it is already partially visible on page load.
/* fade in */
#logo {
animation-name: fadein;
animation-duration: 3s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes fadein{
from {opacity: 0; filter: alpha(opacity=40); /* IE8 version and earlier */}
to { opacity: 1; filter: alpha(opacity=40); /* IE8 version and earlier */}
}
/* Standard syntax */
@keyframes fadein{
from {opacity: 0; filter: alpha(opacity=40); /* IE8 version and earlier */}
to {opacity: 1; filter: alpha(opacity=40); /* IE8 version and earlier */}
}
This approach can be used when creating a WordPress child theme. Modify the PHP code in the header that displays the image. In WordPress 2016 theme the line to alter begins:
<img src=”<?php header_image();
Simply change this to:
<img id=”logo” src=”<?php header_image();
Add the CSS to the child’s style.css file.
Sub-sub menu Twenty fourteen secondary menu is not aligned
A work round for where your sub menus in Twenty fourteen secondary menu is not aligned, detached or overlaps.
If you have customised your 2014 secondary menu and the sub or sub-sub menu doesnt’ work then add a style change in your twenty fourteen child’s CSS. Simply change the xxxpx width of the CSS “class secondary-navigation ul ul” rule to whatever fixes the problem. Simpy use firebug or keep changing the setting until you get what works.
.secondary-navigation ul ul {
width:xxxpx;
}
Obviously
.secondary-navigation ul {
width:xxxpx;
}
will set the WordPress twenty fourteen initial submenu width.
Setting a different header image on a mobile phone
This method can be used both in a WordPress website or a non-WordPress web design. Basically, I’ve made here an assumption that the website design header image is displayed as a background image in a div called header. The need for any positional information is ignored here for clarity. Assuming the header image is 1080 x 198 pixels on a PCm we need to replace it with something that fits and still looks good on 480px wide mobile. The default layout CSS could be:
#header {
background-image: url(headerlarge.jpg);
height: 198px;
width: 1080px;
}
Below the website designer decides to make a different smaller more squarer jpg image for the mobile 480pixel screen. The header div CSS is then changed to hold it. Initially the default is set in this case, but then overridden by the @media rule if the screen is small.
#header {
background-image: url(headerlarge.jpg);
height: 198px;
width: 1080px;
}
@media only screen and (max-device-width: 480px) {
#header {
background-image: url(headermobile.jpg);
height: 480px;
width: 480px;
}
}Using CSS3 @media Rule to produce a responsive WordPress website design
Firstly, you can set style by selecting a particular style sheet for different screen resolutions or media types and devices.
<link rel='stylesheet' media='mediatype and|not|only (media feature)' href="stylesfile.css">
However, the @media is a CSS rule that allows you to set different styles for diferent screen resolutions or media types/devices. CSS3 uses media queries to check out
- width and height of the device
- width and height of the area of a web page visible to a viewer on a browser ( viewport)
- landscape or portrait orientation
- resolution
@media not|only mediatype and (media feature) {
a list of CSS rules….
}
Media types can be:
- all For use with all media type devices
- print For printer output
- screen PCs Laptops, tablets, smart-phones
- speech for browsers with speech output
A short list of some of the media features are:
aspect-ratio of the viewport
color supported on the output device
color-index The number of colors available
device-height of the device’s screen
device-width
height of the viewport
width of the viewport
max-device-height
max-device-width
max-height of the display area, e.g a browser window
max-resolution of the device, using dpi or dpcm
min-resolution
max-width display area, e.g. browser window
min-device-width of the device
min-device-height
min-height of the display area
min-width
orientation landscape or portrait
An example of setting a larger font for a lower resolution mobile phone screen of 480 pixels or less. The better resolution screens can use 12pixels instead.
@media only screen and (max-width: 480px) {
.content{
font-size:14px;
}
@media screen and (min-width: 481px) {
.content{
font-size:12px;
}
}
CSS using ‘margin auto’ but won’t centre
So you are trying to be a good web developer and using CSS to centre an element within your website design. You are using something similar to below to centre your image or div and it refuses to centre?
margin:auto;
margin: 0 auto;
Basically if the browser is told how big it is, then it can figure out how to centre it inside the outer container. Useful if it knows the outer container size too.
Exact width solution using pixels
Less responsive, but try adding some width information like this
width:xxxpx;
where xxx is the width of the element you are trying to centre. If this works you are on the right track with solving your centering problem. You may also be able to use max-width or min-width etc.
Using percentage size solution
Ok try using a precentage smaller than the outer element that contains what you are trying to centre. e.g. The outer div container is 1000px and the div you want to centre inside it is 800px. Set the the latter’s width to 80%.
width:80%;
The outer might be width:100%, so try 80% width for the object you are centering too.
Like I said if the browser is told how big it is then it can figure out how to centre it.
Display Block
Also try setting display to block
display:block;
Changing WordPress Twenty Fourteen’s navigation hover background
Simply add the following to your WordPress child menu theme’s style.css file. The colour here is set to dark grey (#333) – simply set the background colour to your choice.
.primary-navigation ul ul {
background-color: #333;
}
.primary-navigation li:hover > a,
.primary-navigation li.focus > a {
background-color: #333;
}
.secondary-navigation ul ul {
background-color: #333;
}
.secondary-navigation li:hover > a,
.secondary-navigation li.focus > a {
background-color: #333;
}
.secondary-navigation li:hover > a,
.secondary-navigation li.focus > a {
background-color: #333;
}
Centering WordPress Twenty Fourteen’s webpages
This is a useful trick when using the Twenty Fourteen theme to develop websites. In your WordPress website’s ‘child theme’ style sheet add the following CSS
.site { margin: 0px auto; }
How do I apply multiple CSS classes to a HTML tags when website designing?
Applying the website design classes
To use more than one class inside the HTML tag in the class attribute, simply use both separated by whitespace. For example this uses two classes called class1 and class2. <div class='class1 class2'> Your website design code </div>
Defining the website CSS classes
To have some CSS restricted to when these two classes are found together in the class attribute with an HTML tag simply combine them like this
.class1.class2 {
Your website design CSS...
}
What’s the best way of using CSS to affect the look of a WordPress Website?
I think the best way is to store your CSS style information that will override the website’s theme style is in the file style.css. This file should be in the child theme’s folder.
The look of your website design is controlled by CSS. So if you have a certain style of paragraph you use on your website to emphasis a ‘sales offer,’ for example red italic, then you would need to give this paragraph style a name such as ‘sales.’
The website CSS you would type into your style.css file would be:
.sales {
color:red;
font-style: italic;
}
This style is called class styling. You can simply place this at the end of the child style.css your WordPress developer has set up for you.
In order to format a paragraph as ‘sales’ you can simply go into the WordPress’ webpage editor, place it into text mode see here. and then modify it like this:
Before: <p>This is my sales paragraph in the website</p> You may not see the <p> and </p>. These are HTML webpage paragraph tags. You can also use <span> </span> instead. Change whatever you have to: <p class='sales'>This is my sales paragraph in the website</p> The words "This is my.... in the website" will be red and italic after you update your page and view it.