CSS & WordPress

  • ant02

    (@ant02)


    9 years, 8 months ago

    Please can someone assist me in understanding how to use CSS in wordpress. I’m trying to add a contact widget into my pages gautengelectricfencing.co.za and am using it to learn CSS and also how to incorporate it into my websites.

    Currently I coded the contact us in a table format without using CSS but have written a CSS script now and am unsure how to incorporate it into the site. The plugin which Im using to insert the widget into the page is “amr shortcode any widget” and works well for the table but not sure how to add the css. The support page recommends I change the style css file but what will happen when the template updates,will I have to recode the file again.

    The code I’ve created below is what I want to incorporate into my site

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <style type="text/css">
img {
	padding: 0.3em;
}	
div.box { border: solid; 
	border-width: 5px; 
	width: 280px; 
	height: 150px;
	background-color: #FFFF66;
	border-color: #F00;
	border-style: ridge;
	float: right;
	margin-left: 1em; 

}
A:hover { background: cyan }
p { margin-top: 0.2em; margin-bottom: 0.2em; }
  </style>
<head>
</head>

<body>

<div class="box">
<p><img class="alignnone wp-image-446 size-full" src="http://gautengelectricfencing.co.za/wp-content/uploads/2016/09/contactusNow.png" alt="contactusNow" width="200" height="45" />
  </p>
<p><img class="alignnone size-full wp-image-294" src="http://gautengelectricfencing.co.za/wp-content/uploads/2016/09/phone-icon.png" alt="phone-icon" width="12" height="12" /><a href="tel:+27824103401">0824103401</a>  </p>
<p><img class="alignnone size-full wp-image-295" src="http://gautengelectricfencing.co.za/wp-content/uploads/2016/09/mail-icon.png" alt="mail-icon" width="15" height="12" /><a href="mailto:info@gautengelectricfencing.co.za">info@gautengelectricfencing.co.za</a></p>
<p>&nbsp;</p>
</div>
</body>
</html>

    Please advise what I should add and where I should put the CSS file. I created a test post http://gautengelectricfencing.co.za/beware/ but as ypu can see its not great

    Any help willbe appreciated, Thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • ThemeSumo

    (@themesumo)

    9 years, 8 months ago

    Yes, if you modify the themes style.css, or any other theme file for that matter, you will need to keep re-adding your modifications after each theme update because they will be overwritten.

    This is where Child Themes come in handy as they allow you to safely modify any area of the theme without ever overwriting your custom changes when you update in the future.

    Hope this helps.

    Thread Starter ant02

    (@ant02)

    9 years, 8 months ago

    Thank you for the feedback, I’m going to use the CSS plugin and later experiment with using a child theme

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘CSS & WordPress’ is closed to new replies.

Tags