Hello,
If anyone can give me some advice or help. I installed opencart and I am figuring out how to edit the built in template. What I would like to do is make the page background dark grey to black keeping the bottom and top the same. Then for categories change it to a full size image with text above it specificaly the category name and subcategory. I figure the menu has to be changed all to light grey with black text and the refine search has to be put in a box or color text changed to white.
Any ideas will help. I can play around with the templates but if someone knows where to look it can be a big help. I'm using and testing the latest Opencart.
I added a quick example of what I mean with text showing where the changes would be in red.
Regards
Vivienne Anthony
I think the best way to do this would be to copy over the default theme, rename it , and then go further that way changing your newly copied 'default theme'.
From the top of my head you will need to copy over the folder in catalog -> view -> theme, and in admin -> view -> theme. (correct me if im wrong.)
From the top of my head you will need to copy over the folder in catalog -> view -> theme, and in admin -> view -> theme. (correct me if im wrong.)
You suggest you are using the latest opencart yet have posted in OC2. The latest is OC3 and twig whereas OC2 is php, to this end you are asking for us to duplicate .. Nevertheless to try to give you a starting direction ..
1. you need to learn css ..
https://www.w3schools.com/css/css_intro.asp
2. your need to edit your stylesheet for styling changes like colour ..
your stylesheet is catalog/theme/view/default/stylesheet/stylesheet.css
3. you need to learn how to find the css selectors ..
right click on your browser
To answer your questions ..
background black to dark grey (add to your stylesheet.css)
grey category menu on left (add to your stylesheet.css)
Refine search is under the h3 selector - but then there is all the other headings .. so .. (add to your stylesheet.css)
to change just refine search
catalog/view/theme/default/template/product/category.tpl
change from
to
(add to your stylesheet.css)
to change the image size in categories
admin => settings => image tab => category image
change to 1200 x 300
catalog/view/theme/default/product/category.tpl
change from
to
and if it is OC3
category.twig
1. you need to learn css ..
https://www.w3schools.com/css/css_intro.asp
2. your need to edit your stylesheet for styling changes like colour ..
your stylesheet is catalog/theme/view/default/stylesheet/stylesheet.css
3. you need to learn how to find the css selectors ..
right click on your browser
To answer your questions ..
background black to dark grey (add to your stylesheet.css)
Code: Select all
body {
background: rgb(0,0,0); /* default to black on old browsers */
background: -moz-linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(103,103,103,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(103,103,103,1) 100%);
background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(103,103,103,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#676767",GradientType=1);
}
Code: Select all
#column-left > div.list-group > a {
background: #ddd;
color: #000;
}
Code: Select all
h1, h2, h3, h4, h5, h6 {
color: #fff;
}
catalog/view/theme/default/template/product/category.tpl
change from
Code: Select all
<h3><?php echo $text_refine; ?></h3>
Code: Select all
<h3 class="someclass"><?php echo $text_refine; ?></h3>
Code: Select all
.someclass {
color: #fff;
}
to change the image size in categories
admin => settings => image tab => category image
change to 1200 x 300
catalog/view/theme/default/product/category.tpl
change from
Code: Select all
<?php if ($thumb) { ?>
<div class="col-sm-2"><img src="<?php echo $thumb; ?>" alt="<?php echo $heading_title; ?>" title="<?php echo $heading_title; ?>" class="img-thumbnail" /></div>
<?php } ?>
<?php if ($description) { ?>
<div class="col-sm-10"><?php echo $description; ?></div>
Code: Select all
<?php if ($thumb) { ?>
<div class="col-sm-12"><img src="<?php echo $thumb; ?>" alt="<?php echo $heading_title; ?>" title="<?php echo $heading_title; ?>" class="img-thumbnail" /></div>
<?php } ?>
<?php if ($description) { ?>
<div class="col-sm-12"><?php echo $description; ?></div>
and if it is OC3
category.twig
Code: Select all
<h3>{{ text_refine }}</h3>
Code: Select all
{% if thumb or description %}
<div class="row"> {% if thumb %}
<div class="col-sm-2"><img src="{{ thumb }}" alt="{{ heading_title }}" title="{{ heading_title }}" class="img-thumbnail" /></div>
{% endif %}
{% if description %}
<div class="col-sm-10">{{ description }}</div>
{% endif %}</div>
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
Thanks. I made several modifications including editing the twig. It helped. The only bugger I have is some weird icon thing right after the currency.
Who is online
Users browsing this forum: No registered users and 46 guests