I am pretty new in WordPress and BootStrap CSS framework and I have the following doubt:
I have installed this theme that integrate BootStrap framework and I want to use it as a start point: http://bootstrapwp.rachelbaker.me/
I have change the background color of the homepage changing the background-color property into the body field in a file named bootstrapwp.css inside my theme using FireBug plugin
Ok...my doubts are:
1) Why this CSS file is named bootstrapwp.css and not bootstrap.css as in the downloaded BootStrap 3 framework? And why this file is slightly different form the dowloaded bootstrap.css file?
2) What is the better way to change a style in BootStra? I can change it directly inside my bootstrapwp.css or is better do it in another file overriding this behavior?
Tnx
Andrea
Andrea:
There are a lot of answers for your questions but I will work to simplify it for you.
First, what the developers are trying to do is get Bootstrap functionality within the Wordpress CMS. They are two entirely different animals. Bootstrap consists of individual pages that must be hand coded. Wordpress is a Content Management System (CMS) where you can apply a style, theme, sidebar, template or widget and have it appear on every page site-wide.
So, what the developer is doing is using the bootstrapwp.css file to handle the CSS for the entire Bootstrap themed Wordpress site. Remember, this is NOT a Bootstrap site. It is a Bootstrap themed Wordpress site that seeks to incorporate the functionality and design of Bootstrap within the confines of the Wordpress Codex.
If you're running a Wordpress site, the best way to change a style is always going to be in the CSS file provided by the child theme.
You can try Impulse Press. It's the most complete Wordpress Bootstrap 3 starter Theme
Take a look at the demo impulsepress.twoimpulse.com
with this you can change your css style in bootstrap-theme.css and don't touch bootstrap.css , so when we have an update it doesn't ruin your site styles
And Vincent Polisi is right, you can also make a child theme and get Impulse Press always updated
Related
good day guys, i am new to web development, so apperntly, i got a work to design an ecommerce site for a client. the client wants something similar to www.gallerydept.com . But when i used inspect, i noticed the cdn is shopify's and not bootstrap and i'm only familiar with bootstrap.
how can i convert or intergrate bootstrap?
or what is the best suggestion or advice you can give me?
(please remember i'm new to web dev)
A suggestion would be - Don't use bootstrap within shopify.
Reason - Bootstrap has their own set of customizations and shopify's depends upon the theme you are using. Let's consider two scenarios:
For example, you want to create a modal popup and you directly use the bootstrap's library for the same. The look and feel will be different and then you would add your own CSS to override that - problematic thing.
Second scenario, you integrate bootstrap's cdn into shopify then all the other components styling will get affected like buttons, navbar, hrefs etc. So the flow is bootstrap's css overrided your shopify theme css and then you will override both in order to get back to the original - shortly it will become unmanageable.
But after all this I am not saying don't go ahead with this, what I have seen some people doing is utilizing only bootstrap's flexbox system to manage responsiveness in custom shopify pages (which is a good technique because bootstrap's flexbox system is pretty great). So basically what they do is take bootstrap's CSS file and remove all CSS tags not pertaining to the flexbox system and use that leftover CSS file.
And answering your doubt, what you should do now is - go with native HTML/CSS. You get stuck somewhere, SO that doubt/get the code by inspecting the website you have.
Shopify is using themes so you can start looking into tutorials on how to create themes for Shopify. Bootstrap is only controlling the look and feel of the website which is what you do. Shoppify will control the entire ecommerce functionality. So you can use Bootstrap inside the Shopify theme.
You need to be using LIQUID to code anything in Shopify and be sure not to use SCSS only CSS
I am working on a website (built on WordPress custom theme) in which I have to make responsive web design.
In that website, I have to replicate the mobile design from the PSD so that it looks good on all devices.
Problem Statement:
The website is built on wordpress custom theme.
In order to make the website responsive, what I have done is on seeing HTML code after doing inspect, I have written CSS codes in the Additional CSS section of the wordpress.
Here is the sample fiddle (In it the HTML code is copied from the inspect section of the website) which I have created.
The HTML code from the fiddle is coming from the inspect section of the website and I have added the CSS codes in the Additional CSS section of the wordpress website.
The snippets of HTML code which I have used is:
<tr class="alt">
<td id="gv-field-6-29" class="gv-field-6-29">2016</td><td id="gv-field-6-1" class="gv-field-6-1">
Hello World</td><td id="gv-field-6-31" class="gv-field-6-31">McMaster University</td><td id="gv-field-6-25" class="gv-field-6-25"></td>
</tr>
<tr class="">
<td id="gv-field-6-29" class="gv-field-6-29">2016</td><td id="gv-field-6-1" class="gv-field-6-1">
Hello Universe</td><td id="gv-field-6-31" class="gv-field-6-31">TÉLUQ</td><td id="gv-field-6-25" class="gv-field-6-25">Open Category</td>
</tr>
My question is if its the right way to make the responsive web design for the website built on wordpress custom theme ?
There will be two parts two this.
For responsive design you are on the right path. You are using media queries in your CSS, no problems there. The problem might come from trying to build on a custom theme that isn't responsive already. But I would encourage you to read about mobile first design if you haven't already.
What most of us do is write the HTML and CSS theme and then combined that with Wordpress by creating a custom theme. You create a custom theme in two ways:
Child Theming
A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.
It's up to you what theme you want to pick, but ideally you want to choose a theme to child theme that resembles the design you have created in Photoshop as closely as possible.
Or by creating your own theme(Link to great starter playlists.) There also templates you can use to start your theme development such as underscores
Ok given that you have a custom made theme that you're working on you can choose to edit the theme directly (I would advise against this if you don't know the theme creator), create a child theme from the custom theme, or just make a new theme that looks the same (I would be careful with this if you don't know the theme author).
For CSS the new standard for design is using flexbox, or CSS grids. Here's a great article on those.
You could also use a CSS framework which you'll have two choices:
Component Based CSS Framework
This is when there are prebuilt components such as navigation, articles and sometimes modals.
List of Component Based Frameworks
Bootstrap
Foundation
Bulma
Materialize
Or you could use a utility css framework like tailwind css. Utility frameworks give you greater control over the look of your css without having to actually write much css at all by just adding various pre-made classes to your html structure.
For a better explanation on Utility frameworks go here.
(like how override cms' css file like using classes under bootstrap instead of main.css)
..
I having a problem with my website which i made by developing only front end using HTML& CSS. (website is in .HTML).
I decided to use the website under a CMS so that it can be more secured and efficient and i chose fuelCMS1.3.1 under CI.
But i faced a problem when pasting my code into the CMS, my website itself has a css file called 'main.css'..while the fuelCMS itself uses its own 'main.css'!
when it came to pasting code of a dropdown menu from bootstrap, my website under CMS, dropdown menu is not working!
I went to inspect element to see my .HTML website, and it shows that its making FULL use of bootstrap.min.css & few main.css.
but in CMS, when checking inspect elemtn, i found that HALF of the dropdown menu css is using 'main.css' instead of boot strap!
how is possible that 'main.css' in fuel cms is being used instead of my bootstrap link?
i mean, i understand that 'main.css' in fuelCMS is having same classes as in bootstrap, so it is overriding them..how do i solve this and force fuel cms to use classes from my bootstrap link ONLY?
im also facing the same problem with 'body', becuase when i check the inspect element for the 'body' in css, in my HTML website its only used once, But when i check inspect element is FuelCMS, its being surprisingly being used more frequently.
body tag is used in several css files
(as if fuel cms has its own css identification and classes for 'body' instead of making use of my own 'body' tag for local HTML files..same goes for the main.css, fuelcms is identifying my site css tags using its own css files rather than my ones (its overriding them)..not to mention missing classes from my own css files being ignored)
its like my css are clashing with css of the cms, where the cms is overriding my ones.
hope i was able to explain well.
im quite new with front end developing, so I'm still managing and learning trying to track the problem and solve it.
Any suggestions? Thanks in advance.
The main.css is placed under assets folder.
Just remove the main.css and use yours instead.
Or you can use custom.css to override the main.css.
Just include the custom.css in your layout.
I am trying to build my own theme, but I am looking for a good markup page that has all the components and buttons, and navs, and such all on one page. I have tried to create one myself and I just don't have everything that you would see on a theme preview website. Is there a good markup available?
I'm not sure if i get you right, but normaly those both links should give you a good starting point! very well documented:
Bootstrap getting started
Bootstrap Components
Talking about that you can find it in the bootstrap website.
In the components of that site.This component tab has all the components but you can also check the javascript tab
http://getbootstrap.com/components/
http://getbootstrap.com/javascript/
I have site created already which is not bootstrap, and now i need to implement the bootstrapValidator for the validation purpose, if i include bootstrap css then my site style also changing,
Is there any way to include bootstrap form styles alone in html, apart from cut copy in bootstrap css file?
You can use the Bootstrap Customizer
and check only the "form" checkbox to download only the part you need...
Use customize css download from bootstrap site, here you see the options of customizations. You can choose what you want in your CSS. Or you can use less css, download the bootstrap less master from github and compile theme as per your project needs.
The only way to do this is to find a stylesheet that someone else took the time to copy / paste from the Bootstrap. I've done this on several occasions, and its pretty simple as all the form-styling elements are placed next to each other in the bootstrap stylesheet.
So, find you scissors :)
You can't import a part of a css file, so you can copy/paste your desires classes on your actual css or rename your classes in your css file to not have conflicts with bootstrap's classes name and then your site's style will not change when you include bootstrap.