I am using a bootstrap css theme on my website but in a certain sub section of it I want to only use the plain bootstrap css. Is this possible without resorting to using an iframe?
For clarity this is what I want:
<div> <!-- this is styled by both boostrap and theme css -->
<div> <!-- this as well -->
<div id="subsection"> <!-- this is styled only by bootstrap css -->
</div>
</div>
</div>
I ended up using an iframe and communicating between it and the parent frame with https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
Related
i just started css & html this week, but i already have a problem with the top-bar.
I don't understand why the elements of my top-bar won't align and be center.
<!--HEADER-->
<!-- LOGIN FORM -->
...
<!-- END OF LOGIN FORM -->
<!-- END OF HEADER -->
I want them to be align and straight, like
[LOGO] [h1] [LOGIN_FORM]
And i might add some buttons in the futur.
(PS: I use Bootstrap 3)
/!\EDIT/!\ :
I fixed some trouble and make my code a bit cleaner, but style doesn't work :(
<body>
<!-- TOP BAR -->
<img src="../images/company-logo.png"/> <h1
id="text-center" style="display:inline"> NetStatus </h1>
<!-- LOGIN FORM -->
....
I just need "NetStatus" to be center
use text-align: center and that will center your text
I want a background (color) to be displayed by default for each article. I thougt of doing this in a css file, but I don't know where to place the statement. Btw I can't find the definition of the article tag in any css file.
The following code shows 2 articles:
<div class="items-row cols-3 row-0 row">
<div class="item column-1 col-md-4">
<!-- Article -->
<article>
<header class="article-header clearfix">
<h2 class="article-title" itemprop="name">
<a
href="/joomlatest/index.php/78-uncategorised/welcome"
itemprop="url" title="Welcome">
Welcome</a>
</h2>
</header>
<!-- Aside -->
<!-- //Aside -->
<section class="article-intro clearfix">
<p>Hi</p>
</section>
<!-- footer -->
<!-- //footer -->
</article>
<!-- //Article -->
</div>
<div class="item column-2 col-md-4">
<!-- Article -->
<article>
<header class="article-header clearfix">
<h2 class="article-title" itemprop="name">
<a
href="/joomlatest/index.php/dates/testdate"
itemprop="url"
title="Testdate">
Testdate</a>
</h2>
</header>
<!-- Aside -->
<!-- //Aside -->
<section class="article-intro clearfix">
<p>some Text</p>
<p>
<img src="/joomlatest/images/9697505.jpg" alt="9697505" />
</p>
</section>
<!-- footer -->
<!-- //footer -->
</article>
<!-- //Article -->
</div>
</div>
Any ideas which stylesheet or which tag I should manipulate or is there any other way this is done?
Where to put the CSS depends on the website. If you're a developer you can add CSS files to extensions etc; if a user, the template you are using is the most likely place to put your CSS and that will depend on the particular template you are using. Some templates have overrides you can select in the administrator, for others you will need to find the template (in /templates/yourtemplate) and pick which CSS file to edit; typically that will be in a folder called css, and the main css file is likely called template.css. Some commercial templates have custom css files so you can avoid having your custom css overwritten if you update the template.
For how to apply the background color, that will depend on your joomla version as well as the specific way the article is displayed. In you instance, applying to div.item probably will work, but items might also be displayed in class item-page, or a template might override the stock joomla layout for one of the various article display options. Thus you'll probably want to inspect the pages and find out what classes are used, and make sure to check various different pages to see if the different ways items get displayed (such as Category - blog, single article, featured articles, or any particular modules or components you use to display content in other ways.
I just found a solution, where I don't have to change the template's css files (thanks to Charlie for the update thought). The template I'm using (Purity III T3 template) has a menu caled "Custom Code" on the backend. Here I added code at the field After <head>.
<style>
article {
background-color: rgba(255,255,255,0.4);
border-style: solid;
border-color: rgba(51,153,51,0.5);
border-width: 20px;
padding: 20px
}
</style>
Probably not the best solution, but it works for me.
I have a problem positioning my title inside a div with grid classes (from bootstrap).
Here is my very simple code:
<body class="" >
<div class="container " id="main">
<div class="row " >
<div class="col-xs-3 " >
</div> <!-- /col-xs-3 -->
<div class="col-xs-9 " >
<h3 class="">Benvenuto</h3>
</div> <!-- /col-xs-9 -->
</div> <!-- /Row -->
</div> <!-- /container -->
</body>
There is no custom CSS added.
Here is my chrome output:
And here is my ie7 output:
As you con see using chrome the h3 si put inside the bootstrap div, while using ie7 is put under it.
This is my test website, if you need to check it out.
Do you know how to solve it?
Thanks!
As knitevision stated in his comment; IE 7 is not supported by Bootstrap.
IE 8 and 9 are partially supported.
(IE 8 needs responsive.js for responsive features to work)
But, there are some tricks to make it work if you absolutely need it, see this page: Bootstrap 3 for IE7 (Beta). I haven't tested it on your page, but it might be worth a try!
See this page for for information on Bootstrap browser-support: getbootstrap.com
Im developing this website by using wordpress and the client requested a custom bar( www.orbit.yetu.co.tz ) But once i inserted the image and created a div for it, it automatically generated a white space between itself and the navigation bar.
<body <?php body_class($body_classes); ?>>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Main Container -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="main-container">
<!-- This is a custom bar added by me -->
<div id="main-topbar">
<img src="http://orbit.yetu.co.tz/wp-content/uploads/2014/12/top-bar-new.jpg" alt="Orbit Securities" style="margin-left:auto;margin-right:auto;width:1180px;height:90px">
</div>
<!--This is the end of the top bar -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Top Bar - Set "white" or "dark" below -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="header <?php echo $basix_options['top_bar_style'] ?><?php if ($basix_options['fixed_header'] != FALSE) { ?> sticky<?php } ?>">
<div class="topbar content-width">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Logo -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
What am i doing wrong?
Add display: inline-block to the <img>
I check your code, and first of all, i would suggest to add a class to the image, to better handle with CSS.
To fix the error, apply the display: block; property to it, to get rid of the line-height, in fact images by default are defined as inline elements so they follow text rules.
See here a live example of the difference between inline and block property apply to images.
And have a look here to better understand the theory behind the difference.
I am facing a weird problem in my HTML template.
Expected Layout is :
Navbar
Slider - Text on the slider
Some Section.
Result:
Navbar
1. Some Section
Slider - Text on the slider - Section on the slider i.e., below the navbar
I am using bootstrap.
Using 'Developers Tools' I found out that, the slider.js appends some div tags just before any other tags in the body. The whole area is covered by the slider div first. Then comes the navbar and section. Looks like there is no connection between navbar - section and slider.
The existing code looks like this in the browser in developer tools option:
<body>
<div class="slider></div>
<div class="container">
<div class="panel">
<img src="" class="" />
</div>
</div>
<nav>
</nav>
<section>
</section>
</body>
Please help me. I am unable to understand.
Thanks.