Post by vivienneanthony » Tue Oct 15, 2019 6:32 am

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

Attachments

map.png

map.png (63.48 KiB) Viewed 3219 times


New member

Posts

Joined
Tue Oct 15, 2019 6:23 am

Post by MichielAtticIT » Sat Nov 02, 2019 9:34 pm

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.)


Posts

Joined
Sat Nov 02, 2019 9:00 pm

Post by by mona » Sun Nov 03, 2019 4:58 am

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)

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);
}
grey category menu on left (add to your stylesheet.css)

Code: Select all

#column-left > div.list-group > a {
background: #ddd;
color: #000;
}
Refine search is under the h3 selector - but then there is all the other headings .. so .. (add to your stylesheet.css)

Code: Select all

h1, h2, h3, h4, h5, h6 {
    color: #fff;
}
to change just refine search
catalog/view/theme/default/template/product/category.tpl

change from

Code: Select all

<h3><?php echo $text_refine; ?></h3>
to

Code: Select all

<h3 class="someclass"><?php echo $text_refine; ?></h3>
(add to your stylesheet.css)

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>
to

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


User avatar
Expert Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by vivienneanthony » Sun Nov 10, 2019 5:56 am

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.

New member

Posts

Joined
Tue Oct 15, 2019 6:23 am
Who is online

Users browsing this forum: No registered users and 33 guests