editing template

[misfitsbodypiercing]

I'm trying to edit the template and change a few bits around. - bear in mind im new to php, etc script writing.

Ive changed some of the icons and the padding so they fit without overlapping text. But it was a bit of hit and miss.

Is there an easier way to find which page i need to edit to change attributes - i managed to do the others by looking through 'view source' and 'inspect element' on right click - but again was a hit and miss and took me a while as i wasn't 100% sure what i was actually looking for.

[vekia]

can you shed some light on what you exactly want to change? url will be helpful in this case

[misfitsbodypiercing]

can you shed some light on what you exactly want to change? url will be helpful in this case

I'm looking at changing some bit on the default template. At the moment i've managed to change the default newsletter icon and the arrows on the category block - but when i changed them the overlapped the text that was next to them - which i sorted by shear luck.

 

I want to change things like background colour of the menu bars and font & colour,

change the icons for the shopping cart, search bar, log out icone etc. - but if i change them to a bigger icon they overlap the text that is with them.

 

By right clicking i can 'inspect element' and 'view source' but im not always 100% sure exactly what i'm looking for.

 

Just to change a few things so it's not the standard template - make it my own a little

 

http://misfitsbodypiercing.co.uk/webshop/

 

managed to change the newsletter icon and change it's padding so it's not overlapping and the same with the arrow icons on the categories block... but i wasn't sure how i managed to do it lol

 

 

[misfitsbodypiercing]

and how do you change the font on things like the categories block?

[vekia]

hello

 

you want to change many things so it's really hard to say what you have to do step by step. You need some basics knowledge about CSS styles.

 

for example, if you want to change font to categories block, create new style:

#categories_block_left li a with styles, for example:

#categories_block_left li a {
	color:red!important;
	font-size:20px;!important;
	line-height:20px;
}

effect:

 

 

 

 

if you want to change top menu styles, you have to modify styles located in: http://misfitsbodypiercing.co.uk/webshop/modules/blocktopmenu/css/superfish-modified.css

 

for example, if you want to change background, edit styles:

.sf-menu {
margin: 10px 0;
padding: 0;
width: 980px;
background: #383838;
}

modify background: #383838 for something other, for example: background:#FF0000;

 

effect:

 

 

if you want to change background of whole website, edit backgrund param in:

body {
font: italic 12px/14px georgia, Arial, Verdana, sans-serif;
color: #222;
background: #fff;
}

[Guest]

......

 

The best thing I can suggest is using Google Chrome Developer tools. You go to the web page and bring up developer tools and it allows you to see all the coding on each element as you select it. You can also live edit to see the effects. 

 

Once you know which bit of css affects which part of the page then you can edit the real file

 

https://developers.google.com/chrome-developer-tools/