I work in wordpress but do have some clue about HTML. So now I know it is easy to use custom CSS but I d like to change something in the HTML. And ideas, suggestions ?
You can't directly change themes (HTML/CSS) since when the theme is about to get updated, your custom HTML and CSS will be reset (deleted). If you want to edit a WordPress theme, you need to create a child theme.
Create a child theme that's called similarly to your parent theme (twentyfeefteen-child)
Create a style.css file inside the newly created folder
Type in the following:
/*
Theme Name: Twenty Fifteen Child
Description: Twenty Fifteen Child Theme
Template: twentyfifteen
Version: 1.0.0
Text Domain: twenty-fifteen-child
*/
Now you simply create files you want to overrite. Say you want to edit the index.phppage. You create a file called index.php in the child theme folder, copy the code from the parent and edit what you want.
Templates are usually located in: {your project path}/wp-content/themes/
For more info about child themes, go here...
Related
I am new to wordpress development. I was wondering if I am able to combine an existing wordpress theme that I currently have on my website with an html template that I found through themeforest. Would I need to create an entirely new wordpress theme for this? Or could I just import the css files of the html theme and use the html elements accordingly?
Thanks!
You can edit your wordpress theme according to your desire by creating a child theme. See this link child theme
You can modify the theme according to your desire but you cant just copy paste any html template to wordpress and expect it to work.
I just started learning MEAN JS and I am trying to find the html file for the main page. However I only see home.client.view.html and header.clinet.view.html in the view folder.
From what I know is, usually there is a main html which holds all the information of the home page, and we can add links of CSS files and JS files in the main html file.
How can I add links of extra CSS files and JS files in MEAN JS since i cannot find the main html file?
The MEANJS top level page is located under server/app/views/layout.server.view.html and is where you set header meta tags. Most everthing else on the page is programmatically inserted by angular, such as links to CSS files and Javascript files.
Any of the CSS or Javascripts files under your server/public directly are automagically added to the page. If you wish to add other, third-party scripts or stylesheets, you do so by editing your server configuration file, located at config/env/all.js.
So for example, to add the angular version of the tinymce editor to your MEANJS site, you'd edit config/env/all.js by adding CSS to module.exports.assets.lib.css and references to the tinymce editor and its angular wrapper to module.exports.assets.lib.js.
You will need to restart your server (via the 'grunt' command) if you change this file while the server is running.
UPDATE
Using mean-cli#0.6.1 to scaffold a new mean project, the default "top-level" page is located under packages/custom/meanStarter/public/views/system where you will find two files:
header.html - which describes the layout of the default navbar
index.html - which lays out the content of the default page
Now, having said that, it should be noted that the "proper" way of configuring a mean server to display your own top-level homepage is to create a new mean package.
See the docs for further information.
So I understand that a similar question has been asked somewhat before : Structure a stylesheet to manage skins or themes Although I think due to kapsula not being able to articulate (him/her)self properly it was deemed unclear.
I am working on a large project with mulitple CSS/LESS files. We have broken up a lot of the monolithic CSS files into individual ones for CSS specific to certain pages as well as common CSS files for common elements on each page (menus, image placeholders, etc..)
We would like to incorporate multiple themes for the project so we decided upon the following structure:
In the base directory we have all the CSS/LESS specific to all the pages in project, except the colours which we set in the theme directories which are situated within the base directory.
So it looks something to the effect of this:
-CSS
- ORANGE [directory]
-> classic.less
-> controls.less
-> classic.less
-> controls.less
Inside the classic.less file in the ORANGE directory we simply insert the directive #import "../classic.less" and upon saving the file our CSS is generated with all our lovely colour themeing as stipulated in the ORANGE->classic.less file.
So while this process has saved a little bit of work in terms of management of the files, every time I make a change in base directory (maybe i added a new element type to the front end) I have to go into each LESS file that inherits from it and save it again in order for the new CSS to be generated.
Is there a more efficient way of doing this? Or am I looking at doing themeing in an incorrect manner. Should I illustrate what I am trying to do a little bit more?
There is a more flexible way, but you'll need WinLess (maybe it's doable with something else, I just found this to serve my needs) which requires Windows. There should be something similar for other OS'es if you search.
What I've done is, in the CSS or Stylesheet folder of my project, I've created another one named LessBase. Here I keep the core stylesheets. Example:
-Stylesheets
-LessBase
->jquery-ui.less
->forms.less
->buttons.less
->grids.less
->widgets.less
->etc
Then, in the Stylesheets folder, you'll need additional folders with your individual themes. Building on the previous example:
-Stylesheets
-LessBase
->jquery-ui.less
->forms.less
->buttons.less
->grids.less
->widgets.less
->...
->all.less
-Orange
->color-theme.less
->main.css
-Black
->color-theme.less
->main.css
Please note the all.less file. This one is used to import all the files within the LessBase:
#import "buttons.less";
#import "forms.less";
etc
The color-theme.less will basically hold all of your colors. Inside LessBase, all of your .less files will have variables which will be defined in each of the color-theme.less file residing in the theme folder.
Your color-theme.less file might look like this:
#main_color: #edf123;
#secondary_color: #daa123;
#border_color: #e7e7e7;
.
.
.
#import "../LessBase/all.less"
The import of all.less has to be at the end, in order to have the variables defined.
Then, inside WinLess you will make the color-theme.less compile into the main.css placed in the corresponding theme folder.
Here is a screenshot with an example (I blurred out the sctructure. Also, default_1, default_2 are the theme names, replace them with orange, black or whatever theme name you have):
I just installed magento onto a server, and previous to that made a website layout ( basic html website) which i'm aiming to implement as a main layout on the magento site.
I'm new to Magento, and i've tried working with custom wordpress layout with the use of css. Yet this project gives me the assignment to use the html/css layout and change if not delete the default magento template. I Have no idea how to even get started at this.
Can anyone give me some pinpointers? if not just a link to a tutorial.
The idea is the use the layout i made and use it as a template, but with the goal of using Magento's e-shop functionalities.
thank you.
Philip
Magento has a Design folder and a Skin folder to customize your front-end.
File hierarchy
If you set up the folder structure of your custom theme correctly, Magento will only use the files you overwrite in the new theme. If you go to Magento>app>design>frontend you will see a "base" and "default" folder, base is the uppermost folder in this hierarchy.
Design (html + xml layout)
If you want to create a new theme you start with creating a new folder in Magento>app>design>frontend and copy the files you want to change in your theme. So if your theme will change the 1column layout to start with, you'll end up with this:
Magento>app>design>frontend>[YOUR FOLDER]>default>template>page>1column.phtml
Skin (images + css)
Same goes for the Skin folder. When you want to change the main css file for your theme you'll end up with this structure:
Magento>skin>frontend>[YOUR FOLDER]>default>css>styles.css
Setting Current Package
In the Admin panel you will have to go to System>Configuration>Design>Package and set the "Current Package Name" to the name of [YOUR FOLDER].
Manage Stores
You might want to add a store view, store or website to be able to change views so you could for example show a different front-end for different countries or special offers. Make sure you set the package name to the right scope, in this case.
I have an issue. I have made a custom website using CSS and HTML. I want to allow my client to edit and add posts to the website without any knowledge of HTML or CSS while still giving myself the ability to manage the code. Is there any programs or online tools?
I have tried wordpress at (Wordpress.org) and set it up on my website but I was unable to figure out how to use my custom HTML and CSS on the wordpress.
You can create custom sites in Wordpress by using the default installation (I think currently it's the "TwentyTwelve theme), and simply copying the files you want to customize into a child theme directory - named anything you want.
Also copy the default CSS into the child theme directory you make. These files will then be what supercedes the default files when you choose yuor child theme in the Appearance > Themes menu in the default dashboard.