I cannot get my custom CSS to override bootstrap on this site.
I've programmed using bootstrap on many platforms and have never had any problems, but I'm working on a WordPress site for a client and nothing I do is working. I can't assign background colors or similar customizations into classes and stick them in divs, because they just refuse to show up. I can't even use pre-existing bootstrap classes and put them into divs. It's like my CSS file doesn't exist. Basic example:
.my-blue-background {
background-color: blue;
}
<div class = "container my-blue-background">
...
</div>
Or even:
<div class = "my-blue-background">
<div class = "container">
...
</div>
</div>
Or Even:
<div class = "container text-center">
<h1>Hello World!</h1>
</div>
Or even:
<div class = "container">
<h1 class = "text-center">Hello World!</h1>
</div>
I've tried using !important. I've tried just copying CSS files and pages from other themes just to see if they would work, and they do, but if I try to change absolutely anything on their custom style sheet, it doesn't show up. I've tried just deleting their custom stylesheets entirely and it won't even show up on my website that something different has happened. I have tried clearing my cache, and I've tried viewing the website on different browsers and different computers. My enqueues are set up correctly, to the best of my knowledge, as I've tried both:
wp_register_style('bootstrap', get_template_directory_uri() . '/inc/css /bootstrap.min.css', false, '4.0.0', null);
wp_enqueue_style('bootstrap');
wp_register_style('customstyle', get_template_directory_uri() . '/inc/css/custom.css', false, '0.0.1', null);
wp_enqueue_style('customstyle');
And:
wp_register_style('bootstrap', get_template_directory_uri() . '/inc/css /bootstrap.min.css', false, '4.0.0', null);
wp_register_style('customstyle', get_template_directory_uri() . '/inc/css/custom.css', false, '0.0.1', null);
Is there something wrong with my configured settings?
I see some wrong spaces in your html outputs
<div class = **the space here is wrong** "container text-center">
The correct one is:
<div class="container text-center">
If you want to make sure that the custom style is loaded after the bootstrap style you should do this:
wp_register_style('bootstrap', get_template_directory_uri() . '/inc/css /bootstrap.min.css', false, '4.0.0', null);
wp_enqueue_style('bootstrap');
wp_register_style('customstyle', get_template_directory_uri() . '/inc/css/custom.css', array('bootstrap'), '0.0.1', null);
wp_enqueue_style('customstyle');
If that doesn't solve it, a link to the website would help a lot.
The problem turned out to be the cache on the WordPress server side, which wouldn't load my new edits in a reasonable amount of time, making it appear like I couldn't override bootstraps presets. Though I'm not sure it's the proper fix, it was resolved by changing the CSS and Javascript enqueues to:
wp_enqueue_style('customstyle', get_template_directory_uri() . '/inc/css/mystyle.css', array(), rand(111,9999), 'all' );
wp_enqueue_script('customjs', get_template_directory_uri() . '/inc/js/myscripts.js', array(), rand(111,9999), true);
It forced the server to reload my new stylesheets and scripts, giving me immediate changes.
Related
My main web page (index.html) follows a common structure (simplified):
<html>
<head>
<title>...</title>
<meta name=description content="...">
<link rel=stylesheet href="main.css"/>
[... including #font-face loads ]
</head>
<body>
<div id=menu>...</div>
<div id=mainContent>
...
</div>
<div id=footer>...</div>
<script src="jquery.min.js"></script>
... more scripts
<body>
</html>
The web server is well configured such that all the static files are cached and don't get reloaded on the client side if refreshing the page.
Upon choosing a link from the site, mainly from the 'menu' or the 'footer', I want to display different content within the div tag 'mainContent'. Page layout, CSS, fonts, scripts, menue, footer - all is the same. I have identified several means to achive this:
Construct a new subPage.html file copying everything from index.html, then rewrite the div 'mainContent'
with the desired other stuff and change page specifics like title, description etc.
Or use php to include the desired content in mainContent and to change the page specific values like 'title'.
Link from index.html goes to href="subpage.html".
Drawbacks:
Maintenance: when changing anything in the outside 'wrapper', I'll have to edit
every subPage.
no idea how to easily transport values from index.html
to subPage.html, beside cookie (not always permitted) or URL
parameters.
use a javascript onClick handler (event listener) to load requested content from server using XHttpsRequests and exchange the innerHtml of div mainContent.
Drawbacks:
no noscript version possible.
my changing content is probably not indexed by Google bot and alike, since it is not loaded with index.html. Would it change the situation if the 'alternativ content' was saved in .html files in the base directory, such that it would be browsable and discoverable?
Pre:
keeps javascript variables
no need to reload outer page, thus best user experience.
use a 2nd div 'mainContent2' with style="display: none". With a javascript onClick handler toggle display style of both mainContent divs to none <-> block.
Pre:
easy to implement.
all content loaded and thus SEO indexed.
Drawback:
Everything has to be loaded at once, so the index.html might get pretty big.
[4. iframe probably not an option (as the src attribut is static)]
I tend to opt to alternative #2.
Any other technics recommended? What is the 'best practice'? How is this generally done by the pros? Suggestions? Please elaborate.
I'll give you a few answers based on each option:
PHP
You can use PHP to import the header and footer instead of the main
content, that way you have just one file with a header and another
with a footer and all the pages that you create with different
contents will import the header and footer, avoiding duplications.
JS
Do you need a no-script version? I have never seen someone who disabled js but I don't know your app, it could be a pre-requirement.
You can use a modern js framework like Next + React / Nuxt + Vue / Remix / Svelte / ... There is a lot of options here that can provide you an SSR (Server Side Render) and make Google Bot happy
SPA
This seems to be a SPA. You can use some of the modern js frameworks that I mentioned in the second item. You need to think about lazing load the images too. I don't know how big is this content, but you can try google lighthouse to see if there is some problem with page size in this approach, also, you could enable the gzip on the server.
OR...
All of the above
You can use all of them together too. A frontend with a framework getting data from an API written with PHP, why not? PHP can validate the request type and delivery an HTML if it's the first request or a JSON if the application is already loaded.
Most common solution probably a variant of your option 1. But different then you think. Create a header.php with the content
<html>
<head>
<title>...</title>
<meta name=description content="...">
<link rel=stylesheet href="main.css"/>
[... including #font-face loads ]
</head>
<body>
<div id=menu>...</div>
and create a footer.php with the content:
<div id=footer>...</div>
<script src="jquery.min.js"></script>
... more scripts
<body>
</html>
Then create an index.php like
<?php include('header.php'); ?>
<div id=mainContent>
...content index page...
</div>
<?php include('footer.php'); ?>
And then create subpages like subpage.php
<?php include('header.php'); ?>
<div id=mainContent>
...content subpage...
</div>
<?php include('footer.php'); ?>
This way if anything in the header or footer needs to change you edit the header.php file and the changes will take effect on all pages because the header.php gets included on every page.
I was trying to insert another html page into an php page by using "include"
and that html page is having some stylesheets imported,
When I insert that page, it disturbs my PHP page..
How can I restrict the CSS for that particular page only?
place the imported page inside a container div, and then give it an id like:
<div id='included_page'> Your page goes here...</div>
Then add #included_page .someClass{mystyle: property;} to each and every style defined.i.e, increase the level.
Add a class or id to each <body> and write styles accordingly like below
HTML
<body class='home'>
Home page content
</body>
<body class='about'>
About page content
</body>
CSS
.home .someclass{
}
.about .someclass{
}
Try this.
In Page[restrict the CSS]:
<?php
$type = 'exclude';
inlcude('page_to_include.php');
page_to_include.php:
<?php
if(!isset($type) or ($type !== 'exclude')) {
// Things to be excluded from Page 1;
}
Ref: PHP - include a php file and also send query parameters
i have this div class in style
.page-banner{
background-image:url(../images/background-sec1.png);
background-repeat:no-repeat;
and I've tried to create a new div in the same style with the same declarations but with a new name .page-banner-category.
.page-banner-category{
background-image:url(../images/background-sec1.png);
background-repeat:no-repeat;
and ...
<div class="page-banner-category">
but it does not work,what am i missing here?
Can you provide your HTML code as well to see how you use them? It is difficult to say right away what went wrong.
Also, in your CSS code you don't have to create 2 declarations, you can just use a multiple selector:
.page-banner, .page-banner-**category**{
background-image:url(../images/background-sec1.png);
background-repeat:no-repeat;
}
It will be easier down the road to update them when needed if behaviour is completely
here is.
<div class="page-banner-category col-md-10">
<?php echo single_cat_title('', false); ?>
<div class="theme-breadcrumb">
<?php niche_custom_breadcrumbs(); ?>
</div>
</div>
</div>
Was published before, this is for PHP, and what I try to do is just change the image banner in X category.
Thanks for you reply.
I am unable to place my ads at the center of my site www.ios7.me
this is the script:
<script type="text/javascript">
ch_client = "verronica";
ch_width = 250;
ch_height = 250;
ch_type = "mpu";
ch_sid = "Chitika Default";
ch_color_site_link = "0000CC";
ch_color_title = "0000CC";
ch_color_border = "FFFFFF";
ch_color_text = "000000";
ch_color_bg = "FFFFFF";
</script>
<script src="http://scripts.chitika.net/eminimalls/amm.js" type="text/javascript">
</script>
I have tried various attempts like:
<div align="center">
script
</div>
<center>
script
</center>
<td allign="center">
script
</td>
but all did not go so well Its all just alligned to left.
I have run out of all clues as I am very poor in css
Its simple, just assign some hard code WIDTH and apply MARGIN to AUTO to your DIV (which is wrapping your ADs).
For Example:
<div style="width:1024px; margin:auto;">
<!-- Your Ad related code here -->
</div>
or simply if you want to get width dynamicaly as soon as your page loads, then do let me know in your comment, i will surely get that done for you :)
All the Best !
The <center> element is deprecated - see http://www.codehelp.co.uk/html/deprecated.html
. Use CSS instead so, <p style="text-align:center;">script</p>
. Also try margin: auto;
If you could show a live example (use something like http://jsfiddle.net/) that would really help as there are various dependancies that CSS relies on to work correctly.
Hope this helps
i do this it works .... please try and check it
The element is deprecated - see http://www.codehelp.co.uk/html/deprecated.html . Use CSS instead so, script . Also try margin: auto;
If you could show a live example (use something like http://jsfiddle.net/) that would really help as there are various dependancies that CSS relies on to work correctly.
If you use a sidebar in wordpress, you can put things such as a navigation menu in them.
To place the sidebar in the right container element, you simply call <?php get_sidebar(); ?> within that element, and the sidebar should be placed inside that.
For example, the following code should result in a sidebar within your wordpress footer:
<footer class="footer">
<div id="inner-footer">
<div id="main-content-footer" class="span_16">
<?php get_sidebar(); ?>
</div>
</div>
</footer>
This code will work on pages not integrated with WooCommerce, such as a front page.
On pages with WooCommerce, the code generated by <?php get_sidebar(); ?> will appear outside the footer in the div element #inner-content, which is within the a parent div called #content.
What files are responsible for placing the sidebar code properly in woocommerce? Is it possible that WooCommerce is generating it's own <?php get_sidebar(); ?>? If so, what can I do to make sure my navigation side bar is not affected by WooCommerce?
Thank you all
Seems like this problem has to do with WooCommerce hooks and how their content is wrapped vs. how "normal" themes are laid out.
The simple fix is to use woocommerce_content() to designate your own template for WooCommerce pages. See documentation here:
http://wcdocs.woothemes.com/codex/third-party-custom-theme-compatibility/
Another way to fix this would be to override their sidebar.php file with your own. Documentation here: http://wcdocs.woothemes.com/codex/template-structure/
Make a copy of the simgle-product.php file in your theme directory (same level as functions.php). This is the template for the single product pages. Remove all necessary hooks, including the sidebar hook. Then, refer to this forum: http://phponlinesupport.com/woocommerce-sidebar-t157932.html to finish the job of making your own custom sidebar for just the shop pages.
Note: When creating the sidebar-shop.php file, be sure to include a
Good luck.
This works for me. This code snipet removes WooCommerce sidebar from appearing after #primary block, so you are able to use get_sidebar('shop') in your layouts.
<?php
// in your themes functions.php
/* remove sidebar */
function woocommerce_remove_sidebar_shop() {
if( is_woocommerce() )
remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10);
}
add_action( 'template_redirect', 'woocommerce_remove_sidebar_shop' );
?>