Using CSS in wordpress

(@ant02)

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 3 replies - 1 through 3 (of 3 total)

Plugin Author anmari
(@anmari)

9 years, 8 months ago

if you don’t have a custom theme or child theme, where you are in control of updates, then there are other ways to add css to wordpress https://www.google.com.au/search?hl=en&q=adding+css+to+wordpress

Before you add css though, you may not need to – another way to approach getting the widget to look right when it is in a page and not in the sidebar is to try parameters – see notes here
https://wordpress.org/plugins/amr-shortcode-any-widget/installation/
and the section on styling further down on this page
https://wordpress.org/plugins/amr-shortcode-any-widget/faq/

good luck

Thread Starter ant02
(@ant02)

9 years, 8 months ago

Hi Anmari

Thank you for the feedback, im trying amr shortcode any widget plugin, would you recommend I do a child theme instead. I’m not sure of how to do a child theme, if youcan point me in the right direction please.

Thank you

Plugin Author anmari
(@anmari)

9 years, 8 months ago

You don’t need a child theme to use the plugin BUT if you intend to make any css changes, then a child theme is a safer way to implement a site. As far help, there is plenty out there:
https://www.google.com.au/search?hl=en&q=wordpress+child+theme

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

The topic ‘Using CSS in wordpress’ is closed to new replies.

Tags