I am working on a website using drupal. I have created a view with several fields. I want to set some if the field inline horizontally not not one after another vertically. Please help me in the context.
I want to set these ratings start , I'm interested button and Read More link in a row.
If you're familiar with html and css, you can create a new "Global: Custom Text" field.
Exclude the other fields from display, and use Replacement Patterns inside styled div-containers specified in the custom text field.
Little dirty example working with float:
<div style="width:50%;height:200px;float:left;">
<div style="width:100%;">Next div below me</div>
<div style="width:100%;">Previous div above me [somereplacementpattern]</div>
</div>
<div style="width:50%;height:200px;float:left;">
<div style="width:auto;float:left;">Next div on my right</div>
<div style="width:auto;float:left;">Previous div on my left<div>
</div>
Related
I can see lots of answers for this but not quite the right solutions..
Essentially i'm displaying numerous emails in a thread (looks like iMessage a bit) on a page. The messages are looped within a repeated element, with the HTML email displayed inside it.
I have no control over the HTML in the email content as it could be from anywhere.. the problem is that the HTML in the email is inheriting CSS styling from the page style sheets.. this is making it all look weird..
I can't overrule the CSS with a more specific CSS, as there could be any classes or id's coming in the email that match those in the main style sheet..
I've tried adding all:initial to the wrapper div like this:
div.sentMsgBody *{
all: initial !important;
}
This however seems to override any styles that comes with the email and so looks really naff..
Anyone got any ideas how to display the email content with its own HTML without taking on the main styles?
Thanks!!
Addition:
I've been asked to show my code, though that's quite tricky...
there's loops of a certain div in the page like this:
<div id="page">
<div class="sentMsgBody"></div>
<div class="sentMsgBody"></div>
<div class="sentMsgBody"></div>
</div>
Of course each loop of this div could have any HTML at all as its showing emails...
eg:
<div id="page">
<div class="sentMsgBody">
<div class="Header">My Email</div>
<div class="Main">This is my email body</div>
<div class="Footer">Email Footer</div>
</div>
<div class="sentMsgBody"> ... ... </div>
<div class="sentMsgBody"> ... ... </div>
</div>
Here the Header and Footer etc may take css from the main page...
I thought about iFrames but they are messy, i don't know how big the content will be for each one, are a bugger with being responsive too, and there could be dozens that have to be created dynamically from the content of each div that is loaded by ajax from a handler.
I tried to add some buttons under posts on my tumblr page but they are displaying incorrectly. Like button has right position but reblog appears at the beginning of the post (and on the next posts reblog appears even outside post block). Also after first post text in the other posts moves to the left side. I don't know how to solve this problem.
Blog with problem: http://rkhmlvch.tumblr.com
Original code:
https://github.com/xSOADx/The-Default-Network/blob/master/Theme%20code
Fragment with needed code:
<div id="buttons">{likebutton}</div>
<div id="buttons">{reblogbutton}</div>
Images
First, if you're planning to use styles in a specific element, use ID. If you're planning to use styles repeatedly in multiple elements use Class. I will recommend that you change the ID's to class instead.
Example: <div id="post">...</div> to <div class="post">...</div> same goes to <div id="buttons">...</div>.
Anyway, back to your question.
Your first <div id="post">...</div> is inside <div id="wrapper"> then the rest are outside it. Put the rest of your post inside <div id="wrapper"> and all of them will be the same.
Next, for your buttons. Change it to this <div class="buttons">...</div> instead of <div id="buttons">...</div> then add styles to your CSS:
.buttons { display: inline-block; margin: 5px; }
I have made 2 Divisions out of bootstrap property <div class="col-md-12" > on the same page. In the first one, I have added a different Background and some hover property, now in the second one I have to make a "Sign Up" Div but with other properties with the same <div class="col-md-12" > ie. Full page width row. But the changes are happening on both the Divisions.
Can somebody Help ?
I am using Visual Studio 13 for aspx webpage.
Sorry if it is a silly question.
Thanks In Advance.
You can append another class to the ones you want to style:
<div class="col-md-12 styleme">
Content
</div>
CSS:
.styleme {
background-color: #000;
}
This way, you can style the div using your own custom class as opposed to overriding BootStrap's native one.
NOTE: ensure to place the custom style in your own custom CSS file and ensure it is referenced in your site AFTER the BootStrap CSS file.
I'm trying to adapt bootstrap's standard practices to speed up some of my development but have a quick question related to showing and hiding cols.
I have the following simple layout
<div class="row" id="contactGrid">
<div class="col-sm-2">Sidebar</div>
<div class="col-sm-10">Content</div>
</div>
When I use AngularJS to show/hide the Sidebar col I expect the Content col to stretch the entire width of the container but it doesn't it says at 'col-10'. Do I need to programmically change the class/width to col-sm-12 when I hide the sidebar?
Thanks for your help, I'm sure this is an easy one!
The element with the class col-sm-10 will always have 10/12 of the width of it's parent row. Therefore you need to update it on the fly, when your sidebar changes to hidden. As you already use AngularJS you might have a variable defining if your sidebar should be visible or not. This variable may also define your class conditionally for your content div.
<div class="row" id="contactGrid">
<div class="col-sm-2" ng-show="booleanVariable">Sidebar</div>
<div ng-class="{col-sm-10: booleanVariable, col-sm-12: !booleanVariable}">Content</div>
</div>
Daniel,
Your answer is the reason I'm trying to learn the BS/NG style of UI. It's just knowling where the shortcuts begin and end. To polish it off I used a ternary expression in the ng-class. showFilterSidebar is my hide/show variable. Thanks Again!
<div ng-class="showFilterSidebar ? 'col-sm-10' : 'col-sm-12'">
Yes you need to change class to col-sm-12 and hide for col-sm-2 to avoid problems with floatin .
I have two views in a Drupal page with the following structure:
<div>
<div>Some content</div>
<div> View 1 </div>
<div> View 2 </div>
</div>
Now I want a wrapper div covering the two views:
<div>
<div>Some content</div>
<div class="wrapper">
<div> View 1 </div>
<div> View 2 </div>
</div>
</div>
What is the best and easiest way to do this?
A cleaner way would be to use the views_embed_view function to get the output from the two views, which you then wrap in a div.
Where to put this code and how to do it, would depend on how you are doing things now. You could create a block for it and gain the flexibility of blocks.
You'll want to create a custom .tpl file for this. It would be something like, but not exactly:
views-view-viewname.tpl.php
To find the file name, edit the views then look under Basic Settings > Theme.
You can also use Views attachments (Google around to figure out how to make them). So make View 1 a normal view and attach View 2 to appear after View 1. You will get a wrapper div around both the views.