I have a design which I am doing with twitter bootstrap 3.
I have a grid of images. When I click one of the images, I need the ones below the row of the clicked image to slide down to open a div that would show description of that image.
Something like this link.
I couldn't make this example to work with bootsrap 3.
I need some help with this.
Ok I got this far.
Click this link for bootply link.
I got it to work in the basic level but now I'm having some trouble with the css. The boxes switch places. Also if I change the css of .og-expanded to float: none;, the third div drops below the slide.
.og-expanded{
float: left;
/*float: none;*/
position: static;
}
You can try something like this..
http://bootply.com/133532
It uses jQuery to show/hide the appropriate hidden description following each row of images. You'd need to add a larger 2nd version of each image in the "description" cells.
Related
In Microsoft Word, if you insert an image and then right click on it, under 'Wrap Text' and then select 'Tight' and click on it. By doing that you can drag and move the inserted image anywhere in the word page to your liking.
I was trying to do the same thing in Wordpress. After I insert the image inside the paragraph text box in Wordpress, I tried to move the inserted image position to anywhere wherever I want to but it didn't work. I also right clicked on inserted image but it has limited options unlike Word.
How do I fix this issue that I am facing ?
Chances are the theme you're using either does not specify the css for the added classes, or they are overwritten and the default formatting is no longer being used. Here are some basic css classes you can add to style.css (assuming your theme is queuing style.css)
.alignleft{
max-width:50%;
float:left;
margin:.3em 3em 3em 0;
height:auto;
}
.alignright{
max-width:50%;
float:right;
margin:.3em 0 3em 3em;
height:auto;
}
.aligncenter, .alignnone{
max-width:100%;
margin:1em auto;
height:auto;
}
You can adjust the margins to match your needs, but that's the basic idea. When you align using the wordpress WYSIWYG it just adds classes to the images. Those classes are alignleft, alignright, and aligncenter or alignnone
When you click an image in the editor you get this little toolbar with some icons. Hover over the icons to see the format they are triggering. Here's a simple screenshot.
I would like just align the facebook image in my header to right.
I only have access to wp-admin and can use a custom.css to do this.
Link to my site : http://test.projekt-tenis.pl/wordpress/
My header just look like :
And all I want to do is set position of just the facebook image to right with padding 60px like my logo:
To do this I'm using google :
But I can't find solution to place this facebook button on the right in this container. Can someone help with that? When I try to change the code my whole menu always changes position.
You can get the last-child of the menu (the last li) using CSS and float it right. Put these lines in your custom.css.
/* nth-last-child "-n" means to start from the end, "+3" mean until 3rd from the end. */
.primary-menu li:nth-last-child(-n+3) {
float: right;
padding-right: 60px;
}
You will, obviously, have to make sure how that works when resizing the browser.
Edit: Even better would be to do as I suggest in the comments and add a class to the menu elements you want on the right-hand side:
Go to the Appearance > Menus page in WordPress admin
Click "Screen Options" at the top right
Make sure "CSS Classes" is checked
Expand the menu item you want to float right
Enter a class in the "CSS Classes (optional)" field (example: menu-right).
Then in your css:
.primary-menu li.menu-right {
float: right;
padding-right: 60px;
}
I am currently trying to get my footer menu to center and appear all on one line. Currently, it is on 2 lines for some reason.
The website is: http://museiam.ca/
I am trying to achieve this (image): http://museiam.ca/wp-content/uploads/LookBookPage_1.jpg
The theme I am using allows the option of 3 OR 4 widgets in the footer area. I currently have it set to 3. The menu itself is in one widget including the links Customer Care - Newsletter, where the Follow Us link is in another HTML text widget with all the social icons. I am trying to put everything on one line and centered like in the picture with equal padding.
I have tried to increase the widget of the menu width but to no success. Here is the CSS I tried:
.widget widget_nav_menu .menu-footer-1-container {
width: 800px !important;
}
I am open to any input or solution to achieve my desired look. I appreciate and thank you for all looking.
Look for this .container_12 .grid_4 and change the width to 100%
.container_12 .grid_4 {
width: 100%;
}
Also, you have another widget there which has an empty text post, remove that.
You are using 3 'grid_4' divs to fill 'container_12' parent div. What you need to do (from my perspective) is the following:
Use a single 'grid_12' div to wrap the menu, instead of dividing it into 3 'grid_4'.
Then, give menu UL 'align: center'
For centering li children do 'display: inline-block' on them (I think you already did this one).
I have my wordpress theme built but there are 2 problems, the first the twitter feed I have in my footer (not a widget) is taking the styling for something else instead of the styling I gave it. I styled the links etc for the feed but it's not styling properly. Also I want to have an image behind my footer but not be part of it. In my site I have my footer image that repeats horizontally and an image behind it. My issue is when I put the image in it acts like part of the footer and not the background (it's not my background image just on top of it). Here is a link to my blog (the code is too long to post here):
http://blog.zombiesarefierce.com/
also here is a pic of what my footer is supposed to look like, any help would be greatly appreciated:
http://www.freeimagehosting.net/jq19y
download addon fire bug
Right click on image and click on inspect eliment with fire bug then chang the css of your image
in your case
.art-footer img
{
border-width: 1px;
}
and make it
border-width: 0px;
n here is the screen shot of your site
I have the following fiddle which includes a snippet of the HTML I'm working with:
http://jsfiddle.net/UQGs6/
Basically this is part of a wizard screen that I'm trying to incorporate. I'm using the stepy wizard plugin. But my question is about the buttons. I would like to have the buttons display in the same location for every screen. I made the height of the fieldset.step = 475px.
I want my buttons to be closer to the bottom. How can I do this?
Use absolute positioning
Updated fiddle: http://jsfiddle.net/thomas_peklak/UQGs6/1/
Additional css:
fieldset.step {position:relative}
#default-buttons-0 {position:absolute;bottom:15px;right:15px}