Looking to change colours on my custom skin

[simpson7647]

hi all, i recently purchased a custom skin but would like to change the colours around to a black an orange theme.

first of all,

1- Is orange a colour i can use?
2- Can i change the shade of this colour or is there just 1, orange?

How do i change the colour of :

3- Cart Box
4- Categories box
5- Categories text.
6- Top seller Box
7- Specials Box
8- The line of boxes along the top with Home, Specials, New products etc..

All help will be much appreciated!

many thanks

Regards


Ryan

[rocky]

Topic moved since it is related to a third-party theme

What theme are you using? Can you provide a link to its demo page?

[simpson7647]

hi there, i purchased the theme from here for 22USD

http://www.prestashopthemes.net/pres-1


thanks

[rocky]

You will need to edit the files in themes/pres1a/img to change the colours of those blocks. For example, change themes/pres1a/img/block_header.gif to change the header of the blocks.

[simpson7647]

thanks for the reply Rocky.

Is there just one shade of 'orange'?

thanks

[rocky]

I don't understand. Do you mean the orange keyword? Yes, there is only one orange keyword, but you can use a hex code to choose many different types of orange. Use an image editor like Paint.NET to select a colour, then copy the hex code.

[simpson7647]

i mean as in different orange types (light, dark) for the texts but i guess you have just said theres one.

Id like to use a unique shade of orange for the likes of the catagories box so how do i do this?
What do you mean about hex code etc?

what do i do?

thanks rocky

[simpson7647]

I did as you said but it doesnt open any codes, it simply opens the image of what i want to change :/

How do i open this code ?

thanks

[rocky]

Click on the "More >>" button, then click on a colour on the wheel and you will see the hex code on the right. You can then use it in your CSS like #FF7C30

[simpson7647]

thank you rocky, i see that.

so i simply open css and edit what needs to be edited in there?


One other thing, is there a way to get 2 shades of a colour and use that in Paint.net?
As there's 2 shades of orange that i put together on word 2010 to use as part of my logo.

And if i could add or try to re-create these 2 shades and use within the website blocks, that would look brilliant.


thanks

[rocky]

You can press the Print Screen button on Word to copy your word document, then paste it in Paint.NET, then use the Eye Dropper tool to select the orange colours and get the hex codes.

[simpson7647]

thanks rocky although how would it work when the shades im after are seperate bits of a text.
Because the top half is one shade, bottom half another and i like the contract.

with the eyedropper thing, i could only click one ?

thanks

[rocky]

It's the images you need to change, not the CSS, unless you are using solid colours.

[simpson7647]

Oh right okay.. Hmm when I went to the img bit, I could only click view and it simply opened up the image.. So how do I go about editing it?
And what is it I do to change the colour?

Many thanks

[rocky]

You can open the images in Paint.NET to edit them. Editing images is a big subject and not one I can easily describe here. I suggest you search Google for tutorials on how to change the colours of images.

[simpson7647]

hi there, thanks for the info rocky.

How do i open the image is paint to start with?

and once i have edited, do i simple delete the existing image and re-upload a new one?

Please explain what i do once i have edited an image?

many thanks

[rocky]

Assuming you are using Windows, just right-click on the image, choose "Open with", then "Paint.NET" to open the image. You can then upload the image using an FTP client and overwrite the existing one.

[simpson7647]

Okay thank you very much rocky.

I'll give that all a go

One other thing, I changed changing the codes of the CSS files ( some of the colours) nothing changes on the website so is this okay?

Thanks

[simpson7647]

hi there, that all works so thank you but doesnt change 'home, special etc' block

so i have a few questions:

1)How do i change the 'home, special etc' block

2)How do i change the cart block.

And last of all,

How do i change the actual catagory list, as i need to do a couple of things:

Need to change the main box's colour that holds all the different catagories

And i also would like to change each individual box.

many thanks,

Ryan

[rocky]

You should try using Firebug in Firefox or the Developer Tools in IE8. They have the option to select an element by click, then see which parts of global.css are used to render that element.

[simpson7647]

thanks for the reply rocky although im unsure how to use this :/

thanks

ps

i found out how to do the menu

Just need to know how to change the 'cart' block

and then how to edit catagory list background and box collours

thanks

[rocky]

The categories block code is in the /* Block categories */ section of global.css and the cart block is in the /* Special style for block cart*/ and the backgrounds are in the /* Default block style */ and /* block exclusive */ sections.

[simpson7647]

Where do I find these rocky? Backoffice?

Thanks

[rocky]

In themes//css/global.css

[simpson7647]

how do i change the colour of the category titles someone?

thanks

[rocky]

Do you mean the category title on the top of the product listings page? That's the following code in global.css:

/* category.tpl */
h2.category_title { font-size: 1.3em }

[simpson7647]

thanks for the reply rocky, i mean the title of the actually different pages under the catagories block.

Please help out with this if u can please rocky

http://www.prestashop.com/forums/viewthread/80442/general_discussion/help_with_my_website_as_its_gone_offline_after_chaning_name_servers_dot__dot__dot__but_need_help_please/

thanks very much !

[rocky]

The category block title inherits the colour from "div.block h4" in the /* Default block style */ section of global.css. You can change that colour if you don't mind the colours of all blocks changing. If you want a unique colour just for the categories block, you will need to add code like the following to the /* Block categories */ section of global.css:

div#categories_block_left h4 { color: red }

Change red to the colour you want.

[simpson7647]

still problems with editing the code rocky.


#center_column div.block h4 {
background: transparent url('../img/block_header_large.gif') no-repeat top left;
height: 17px;
color: #B6FF00


I tried editing that code but doesnt doo anything as far as i can see.

please help

thanks

[simpson7647]

ive found literally everything in global.css but cant find what i need to change to change the COLOUR TEXT of the top main block.. which includes home, special, new products, top sellers, contacts etc.

Many thanks,

kind regards,

Ryan

[rocky]

Looks like the menu text colour is in the #menulinks a:link, #menulinks a:visited block in global.css.

[simpson7647]

HI ROCKY, thanks for the reply although still a problem.

I tried changing this:


}


#menulinks ul {margin:0; list-style:none; padding-left:0px;}
#menulinks ul li {float:left; padding:0px 0 0px 0;}

#menulinks a:hover {
color:#00aee7;
background-color: #F6F6F6;
}


But it still doesnt change the main menu block bar at the top.

Please help,

thanks

[rocky]

That's the link hover colour, not the link colour. Has the colour changed when you hover over a link? You need to find the #menulinks a without the :hover part.

[simpson7647]

thankyou rocky, it was just above the bit i pasted

Works a dream, thankyou

So ive changed alll the colours now apart from my account so where will i see this?

thankyou

[rocky]

I can't see any "My account" link on the demo page. I can only see "Your account", which is the #header_user li section and #header_user li#your_account section.