I am Ishika Malhotra, I very new to opencart. I want to make custom themes in opencart using bootstrap 3 technology, I went ahead and followed the few steps below.
I made a copy of default theme and created a new theme mytheme
Catalog>>view>>theme>>default>>
Catalog>>view>>theme>>mytheme (copied css and images and template folder from default theme)
I included bootstrap required files from getbootrap
I am litte bit confused to start and new theme with bootstrap, I made html themme in bootstrap but not able to create one new theme in opencart with responsive features
I need the know all steps to convert from psd to bootstap, then opencart theme.
Please advise
There are not fixed steps , there are just few things you need to take care of :
tpl files are essentially php files and for your case just assume they are html files
Therefore all files in catalog/view/theme/your_theme/template are your tpl files which you will (may) need to edit
your HTML <head></head> section lies in template/common/header.tpl, so this is the file where you will add (reference) your bootstrap js and css files
As the name suggest template/common/ contains html code of parts of page which are common to all pages. e.g. header,footer etc
Put your bootstrap css files in catalog/view/theme/stylesheet/ folder
Put your theme specific image files in catalog/view/theme/image/ folder
That should be all . Just regard your tpl files as html files and do your styling there. Just don't edit/remove anything inside <?php ?> tags
Related
Can't style my menu css,i tried to change in master-ccda(my site www.blobus.on.kg)It helps for 5 minutes than changed back.Please help me to find place where i can change it.
You use a rocketheme/gantry template. Your website has compression/caching enabled for the css. This is enabled either by the template settings or another compression/caching system plugin. Therefore what you get as a final css file, is a dynamically generated compressed css file. Any edits you are doing on this file are getting lost, as soon as the system will generate a new final master.css file.
You need to disable these functions while you are building your website. Doing so will stop the compression of all the css files into one and you will see what rules and from which files your menu and other elements/sections of your website inherit their styles.
In addition keep in mind that it is best to avoid making changes on the core files of your template/extensions.
Gantry templates allow you to create a custom css file where you can put your own css overrides.
The custom css file need to be place inside the css folder of your template and usually needs to have a name of this convention: rt_templatename-custom.css.
I searched a lot on the internet to see a general answer about customizing the view of Drupal main components(if I can call them components) like Fields, Blocks, Views...
I know CSS can work and ... but I need to know if I find the html elements in which CSS files I should put the configurations.
I know it depends on theme css files. But which ones should be used for each of those components?
Thanks
Generally, the html files are in the theme folder.
If you are using Omega (for example), in the sites/all/themes/omega, you have the .tpl files, that Drupal uses to render the content.
For example, the file block.tpl.php is the file that contains the skeleton of any block in your site. Of course the content of the blocks is in the block page (not in the tpl).
The node content is in the node.tpl.php file, you may override the skeleton of any content type if you create other tpl file, for example node--article.tpl.php (for article content type).
You have html.tpl.php and page.tpl.php to customize the skeleton of your page. If you add some html in this files, this content appears in all pages.
Maybe this article helps you: https://www.drupal.org/node/171194
Regards.
I was able to create a Wordpress theme that I am working on, using my local machine. The issue I am having is incorporating Sass into the Underscores Starter theme, with Twitter Bootstrap's Sass and Wordpress.
I was creating the fixed-top bootstrap navigational bar. I managed to add the proper code to include WP_Walker_Nav in my functions.php file, but this is what my navigation looked like My Bootstrap Nav.
The content is too close to the fixed-top navigation and I wasn't able to control the body tag styles to provide padding of at least 60px from the top.
I was wondering if someone can guide me in the direction on how to incorporate Twitter Bootstrap's Sass and Font-Awesome's Sass into Underscore's Wordpress theme.
I'm struggling with the proper workflow. For my Wordpress default style.css, all I would do is put
#import url("css/style.css");
underneath Wordpress Stylesheet default comments.
I have a folder labeled sass (for all my scss files) and a folder css (for all my compiled css). In my style.scss, I import bootstrap and font-awesome's sass files, and I create a separate scss file (main.scss) to use for my custom styling, but nothing works when I create a variable in my main.scss file.
I would set my style.scss file like this:
#import 'main';
#import 'bootstrap-sass';
#import 'font-awesome';
For example:
$padding10: 10px;
body {
padding-top: ($padding10 * 6)
}
nothing happens when I set up my body tag. Please tell me what I am doing wrong, any help is appreciated. Thank you!
For those wondering about how to do this: the _S Underscores theme added direct support for generating a starter theme with a sass-based architecture last year, which I only recently found out about. If you click the “Advanced Options” link on the Underscores main page, you can then select the _sassify! option and you’re on your way. From there, it should be clear to you how to wire in Bootstrap. The generated sass/styles.scss file in your new theme is a very well organized and documented list of imports, to which you can add Bootstrap however you wish (via Bower, direct download, whatever).
As a side note, you can automate this and make it even easier via wp-cli, which very recently added support for the sassify option to their wp scaffold _s subcommand, which looks something like:
wp-cli scaffold _s my-sassy-theme --theme_name="My Sassy Theme" --sassify
(Note that as of this writing, there hasn’t been a release of wp-cli with that feature; you can use it immediately, however, by installing the wp-cli nightly.)
The problem is like this:
We're trying to implement a versioning scheme for our CSS and wherever we have accessed CSS through href (like \themes\ssss\abc.css) we append this link with a build number programatically (such as \themes\ssss\abc.css?1011) so that with new build the client gets the latest css files.
The problem is coming in themes. For e.g. under App_Themes we created a theme folder with the name MyTheme; now wherever this theme is used we need the CSS for this theme to be replaced by latest build files. How to do that?
why don't you create a new theme folder on each build/deploy?
Something similar to \themes\ssss-1011\abc.css.
Add some extra hash to your css url ("#somethingnew"). You can also you tools like SquishIt. It also can minify you css/js files.
We have a ASP.NET solution using images, css and .skin files with in the App_Theme/{selected theme}. The themes today contains many, many files and images and for a customer theme we add a new folder to the App_Themes and copy all files to the new folder and make the 10-200 changes on images, skin and css's.
The issue here is that the default theme, the one we normally have when we develop, evolve's and grows making theme customer theme out of date. So when an upgrade comes we have to go through all files looking for changes and hopefully finding them all. Sometimes we miss things that are really important.
The perfect solution would be to have a base theme that contains the base css, skin and images. And when we add a new customer theme we only tell the system what has been changed, what css-selectors to override and what images to use instead of the images from the base theme. In my understanding, if using the normal ASP.NET theme functionality in App_Themes folder, you can only have ONE theme and not a BASE theme and then say a DeliveryCustomer-theme that has a different background and some other images that the solution shall use instead of the ones in the BASE-theme.
Does anyone have some guidelines to solve this in a maintainable way for the future. I seen that people override the App_Theme path to make it work with custom skins.
thanks!
Use the concept of a base theme like you described. Pull out all common CSS rules into another file, let's call it base.css.
Take base.css and all the images that are common, and put them in a folder outside of App_Themes, and just include the CSS file like you normally would any other on your master page.
<link rel="stylesheet" type="text/css" href="/styles/base.css" /> <!-- Note this isn't in app_themes -->
Then, make sure your CSS files in various themes only specify the delta for your styles.
Ok, so here is how I'v done it know.
I have created a Default theme that is the original theme with all the css-files, skin-files and images that is needed, and that is alot. This theme is in the App_Themes folder. Them I'v created a new folder called ThemeSkins next to the App_Themes folder. In this folder I have all the new skins in different folders. The folders name is the name of the new theme that one want's to have. In each of the skin folders there are css-files that contains only the selectors that I want to overload. There is also images that I want to replace.
I have created a ThemeCreator tool that does three things:
Remove all themes except the Default theme in the App_Themes folder. This is to only have one main theme to work on for the developers. There will still be work that needs to be done in the ThemeSkins, but the overall work load will be minimal.
Next the tool looks at the folders that is in ThemeSkins and creates a folder under App_Themes for each skin with its name. Then it copies the Default theme into all the new skin folders that it just created.
The last thing is that it will merge the skin specific files into the newly created skin under App_Themes and let the user know what files were added just for information. The tool adds a prefix, "z_", on all css-files so that these are loaded last of all css-files and there for will overload the default selectors.
The thing that remains is to update the skin-files, so far, no customer has needed changes in these files. But when they do, I guess I just add a skin files and have to update the default in a automatic way since the skin-markers can't be overloaded as css-selectors can.
This works really smooth and gives us a nice and lean way to work with skins on our themes.
Any one got a better idea how to get the same result? the major issue using ASP.NET themes are that you can't use a default theme and then just apply skins to it without using the shape and color attribute in the skin-files. This is not recommended as the skin files will copy out all attribute to all the places that they are needed in the markup and not just reference them as css-classes do.