Adjusting some elements of the theme

[Fredul]

Hi All,

 

I have recently started building my own online shop with Prestashop (as people do on this forum ) and I am currently using a customised theme; HYC-Black (based ET-Black) as I needed a very simple black background theme.

Now I have the issue that the Contact, Sitemap, Bookmark, Account Login and Search bar are not in the position I would like them to be in. I much prefer the positioning of the original Prestashop theme but I'm not able to change their position (tried using Live Edit as well). Anybody know how I can get these positioned NEXT TO the logo rather then the position they are in now?

URL for shop (far from finished ): www.theforce-collectibles.com

 

Also, once I click on the category list the links appear in green? How do I change that to show a different color (or no change in color). I tried looking in the global.css file but I have no clue what to look for.

 

Any help would be greatly appreciated!

 

Thanks!

[Snade]

Hi, you need to edit your css

 

First on line 344 in global.css

#header_logo {
   display: block;
   float: left;
   width: 360px;
}

then line 357

#header_right {
   border: 3px solid #000000;
   float: left;
   margin-bottom: 15px;
   margin-top: 6px;
   padding: 5px;
   text-align: right;
   width: 61%;
}

then http://www.theforce-collectibles.com/themes/HYCBlack/css/modules/blockuserinfo/blockuserinfo.css on line 2

#header_right #header_user {
   float: none;
   margin-right: 6px;
   text-align: right;
   width: 138px;
}

 

now you have all the blocks in header right, next to the logo, but they are not arranged correct. Go to Modules positions, and place Header Links on top, then search block, then User info.

After that you probably will need some extra css positioning, if you cant handle it alone, let me know when you made the positions, and I'll give you the new css.

 

for the green text - go to http://www.theforce-collectibles.com/themes/HYCBlack/css/modules/blockcategories/blockcategories.css and edit line 50

#categories_block_left UL.tree A.selected {
   color: #488C40; <- YOUR COLOR HERE
   font-weight: bold;
}

 

cheers let me know how it goes

[Fredul]

Hi Snade, thanks a MILLION for that!! I have made the changes in the CSS as you proposed, it's already looking a hell of a lot better. Would you just be able to tell me how I move the Contact, Sitemap, Bookmark part slightly to the right so it lines up neatly under the user log in? That would be great!!

As you can see now the color of the clicked links in the categories is much more in keeping with the site as well, thanks a million for that one as well!

 

Is it easy enough to change the color of the top of the boxes? Like; Categories, Viewed Products, Manufactures etc... they are dark grey at the moment, which is not bad but I would love to give them a shade of blue so that the logo blends in better with the rest of the site.

 

Many thanks guys! Much appreciated!

[Snade]

Hi,

to move left he heade links use this code

ul#header_links {
   float: left;
   list-style-type: none;
   margin: 1em 0.3em 0 2.4em;
}

 

the background of the boxes is image, http://www.theforce-collectibles.com/themes/HYCBlack/css/../img/block_header.gif

you need to make your own image and change it

 

also, your site need a lot more tweaking, my advice to you is to install firebug, and start inspecting the elemets, and tryig to make changes by your own. Its not hard, and require just a basic understanding of css. I'm sure you can handle it

[Fredul]

Thank you Snade, I'll give that a try later including making mu own image for the boxes

 

What do you exactly mean by tweaking? Are there any security issues with the site at the moment? Or is it in regards to the general working of the site or do you mean mainly design tweaks?

 

I need to urgently get a better understanding of CSS!

[Snade]

I'm talking about ndesign tweaks. Personally I dont like the prestashop default view, even more I dont like this poorly black version of it.

But if you have to stick with that design, you'll need atleast to clean it up a little bit. Look at the new products block, just awfull..also featured products block, and the product page.

 

Also, I dont like that all the site is black, but the pics got white background.

[Fredul]

Don't hold back Snade!

 

No, you're right, it's just really hard to find a good black theme for Prestashop but I do like the feedback and I am thinking of going with a different theme all together. I'm looking at something with a dark banner on the top of the page where the logo can be incorporated and some blue tones in the boxes but the rest of the page white.

Thanks for all the help though! I did learn a little more about CSS etc!

[cheap gaming pcs]

Hi, you need to edit your css

 

First on line 344 in global.css

#header_logo {
display: block;
float: left;
width: 360px;
}

then line 357

#header_right {
border: 3px solid #000000;
float: left;
margin-bottom: 15px;
margin-top: 6px;
padding: 5px;
text-align: right;
width: 61%;
}

then http://www.theforce-...ockuserinfo.css on line 2

#header_right #header_user {
float: none;
margin-right: 6px;
text-align: right;
width: 138px;
}

 

now you have all the blocks in header right, next to the logo, but they are not arranged correct. Go to Modules positions, and place Header Links on top, then search block, then User info.

After that you probably will need some extra css positioning, if you cant handle it alone, let me know when you made the positions, and I'll give you the new css.

 

for the green text - go to http://www.theforce-...kcategories.css and edit line 50

#categories_block_left UL.tree A.selected {
color: #488C40; <- YOUR COLOR HERE
font-weight: bold;
}

 

cheers let me know how it goes

 

 

Hi Snade

 

Im just seeig if you could help im trying to change the background on my template .

 

I have the new background ready . Just not sure what code to change

 

Thanks for your help

 

Gary

[epickweb]

I believe this is what you want to do.

 

body {

background-image: url(/images/bg-img.jpg) ;

background-repeat:no-repeat;

background-position:center;

background-color:#ECCEB4;

font-size: 11px;

font-family: Verdana, Arial, Helvetica, Sans-Serif;

color: #5d717e;

text-align: center

 

Change the image and location and any colors to fit your needs.

Hope this helps.