I'm new in the usage of CSS, and i'm still in the learning curve
Basically, i want to display a section using the class col-xs-12 when i select the media print instead of a col-xs-9 in all other medias.
Is there an easy way in CSS to do that ?
Using Bootstraps built-in classes you can either use jQuery, plain javascript or #media queries. If you're using Less or something you can use mixins. Since you mentioned you're new to CSS I'm going to assume it's plain old CSS.
You mentioned that you want col-xs-12 and col-xs-9. You can chain sizes together as well. Eg. class="col-xs-12 col-lg-9", etc..
As noted in the .visible-print and .hidden-print classes you can have the following...
<div id="sectionContainer">
<div class="col-xs-12 hidden-print">
<!-- Add the content to see if your viewing on a web page -->
</div>
<div class="col-xs-9 visible-print">
<!-- Content to show in print -->
</div>
</div>
You cannot change classes in CSS -
A viable workaround that does not involve JavaScript would be to make a third class print and copy+paste the css rules from col-xs-12 to it --
Add this new class to everything that is col-xs-9 which you want to be displayed as col-xs-12 on media print,
and finally, to keep things smooth, put whatever styles you need and your new .print styles into a separate .css file and link it in the head:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
(or, if it isn't a gigantic file at that point, #media only print{} is acceptable )
Alternatively, if you won't be using the col-9 class, you can just swap their classnames in your #media section.
Or, if you're comfortable with a javascript solution, you could add a "Print" button to your page that would do something like
$("#printButton").click(function(){
$(".col-xs-9").addClass("col-xs-12").removeClass("col-xs-9");
});
A media query can only change what the selectors' rules are from size to size, it can't change the selectors you've put into the markup. To change the class in the markup would require the use of Javascript.
YOu oould restyle you col-xs-12 specifically for print to match that of col-xs-12 , or similarly, add a new class, col-xs-12-print and style it to match col-xs-9
when using twitter bootstrap they have classes to hide and show certain elements for print
.visible-print and .hidden-print
http://getbootstrap.com/css/#responsive-utilities-print
Related
If class 'hello' visible then apply some css to 'banner2' class. is it possible? Looking for CSS solution not Javascript.
<div id="banner">
<div class="hello"></div>
</div>
<div class="banner2">
</div>
It's not possible to select a div based on visibility in CSS alone. You can easily use jQuery / JS, but since you don't want that I'd suggest trying out some trickery with CSS combinators and the checkbox hack, depending on how you are planning on changing the visibility of "hello".
The option doesn't exist yet in CSS.
When Selectors 4 will be available you could do it this way:
.banner:has(> .hello) + .banner2
But as of this moment, you can only do it with javascript
I'm trying to make all picture posts on my homepage not clickable, so they can't link to the permalinks. (I just want them to stay as miniatures with the hover cycle effect already provided by the theme)
I've tried removing {LinkOpenTag} and {LinkCloseTag} from:
{block:Photo}
<div class="wide-sizer">
<div class="image">
{LinkOpenTag}
<img src="{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}{block:IndexPage}{PhotoURL-500}{/block:IndexPage}" alt="{PhotoAlt}"
data-high-res="{PhotoURL-HighRes}"
data-width="{PhotoWidth-HighRes}"
data-height="{PhotoHeight-HighRes}"
/>
{LinkCloseTag}
</div>
But photos and photosets are still clickable.
This is my page: http://woodstudiofr.tumblr.com
I'm using the "Spectator Theme".
UPDATE: ok so i tried removing as data-permalink={Permalink}as lharby suggested, but now all the links redirect to /undefined.
Any ideas?
thanks again for your time !
As mentioned in my comment, the data-permalink attribute has been removed, but there is still some custom javascript which is casing the url to be returned undefined.
Go to the bottom of your template, before the closing <body> tag and add this code:
<script type="text/javascript">
$(document).ready(function(){
$('.post').unbind('click').click(function(){});
});
</script>
(Basically instead of binding the post to a click function which is in the custom javascript we are now attempting to unbind it on click).
I tested it in the browser and it looks to be working (although a couple of other methods I thought would work didn't).
EDIT
In order to change the cursor on the post element. Remove the clickable class from the .post div from the template (if you can, if it is hard coded in).
Alternatively inside the style tags at the bottom, add the following css:
.post-grid .post.photo.clickable a,
.post.clickable {
cursor: default;
}
When using ionic framework for building apps, there are two ways how UI elements can be defined:
using div tags:
<div class="bar bar-header bar-positive">
...
</div>
using directives:
<ion-header-bar class="bar-positive">
...
</ion-header-bar>
In the documentation, the first variant (using div) is used. But in a course I was watching, the second one was used (and it seemed cleaner to me).
What are the differences between the two ways shown above? Is there a preferred or recommended way of defining UI elements?
I recommend you to use Directives instead of Div if you need to access to corresponding APIs. For example for a list : http://ionicframework.com/docs/api/directive/ionList/
Using the directive will allow you to use APIs options.
BUT, if you just want a beautiful UI, and you don't need APIs, you can use div which will render templates fastly.
ion-header-bar tag is just Directive written by ionic with some fantastic attribute which you will not get in div tag
attribute like :
align-title
no-tap-scroll
this both comes with ion-header-bar tag so if you want to perform any action on the view so u can use ion tag or only for view purpose you can use div tag.
Cany anybody tell me how to render the following structure in
typo3 without developing a new extension.
<div class="sidebar-details">
<div class="sidebar-details-title">
<h4><span>MY TITLE</span></h4>
</div>
<div class="sidebar-details-body">
<p>
TEXT
</p>
</div>
</div>
What would be the best/recommended way to achieve this ?
Start using gridelements.
Gives you exactly what you want.
http://typo3.org/extensions/repository/view/gridelements
You can activate the RTE html mode and put it in its source or make use of HTML element, but that's depending on your needs.
If you want to keep RTE functions for editing the text what I mentioned first is the recommended way. Have done it several times myself.
If you are using Template mapping using Templavoila so, you can create FCE(Flexible content element) for it and you can map this part.
If you are using fluid template mapping so, you can create gridelement for it. and map all part.
I need to allow add a div with a class attribute in tinyMCE in Umbraco. I can add a div, but all content in the div is just text. I need that text has a paragraph, and finally add a class attribute for the div.
It's a little hard to understand what you are asking, but I think this should help.
http://our.umbraco.org/wiki/recommendations/recommended-reading-for-content-editors/adding-styles-to-the-tinymce
You can basically associate a stylesheet with the tinyMCE and then add styles to it that will appear in the style dropdown
You may use
tinymce.activeEditor.execCommand('insertHTML', false, '<div class="section'></div>');
This will insert the specified html into the editor at the local caret position.
Be aware that your valid_elements and valid_children configuration settings won't strip out anything from the html that you insert.
If you can paste your template code then we can be more of a help to you.
What you want to do is wrap your <umbraco:Item field="aliasOfYourRTE" runat="server" />
with the div you want so in your case your code will look like this:
<div class="YOURCLASSNAMEHERE">
<umbraco:Item field="bodyText" runat="server" />
</div>
The umbraco RTE automatically spits out <p> </p> tags when content is inserted. Also, make sure you are publishing your node so that your content is viewable on the front end.
Hope this helps.
Go to Settings - Styles.
Open the stylesheet with the styles for the Format dropdown of TinyMCE in Data Type Richtexteditor.
Add a style with the Alias div.class, e.g. div.alert alert-danger.
If you then click in TinyMCE on a paragraph and then choose in the Format dropdown this style the paragraph is formatted as follows:
<div class="alert alert-danger"> ... </div>
Is this what you wished to do?