I have an image and i need to use that as the breadcrumb background image. I tried but doesnt seem to be coming correctly. I have created a fiddle for this. Can somebody please help me what I am doing wrong. I am not supposed to change the html since teh same file is being used in other applications also. Only the css, I can change.
HTML
<div id="itemDisplay">
<span id="step1" class="step_on" title="Home">Home</span>
<span id="step2" class="step_off" title="Vehicle">Vehicle</span>
<span id="step3" class="step_off" title="Vans & Trucks">Vans & Trucks</span>
<span id="step4" class="step_off" title="Vanagon">Vanagon</span>
</div>
I have attached an image how the actual breadcrumb should look like
In my fiddle the alignment of the text is not correct except for the first text. The text should be aligned towards left. Also the last breadcrumb is not correct.
When the user is in the first page, only the first breadcrumb text should be bold, when he navigates to second page, only the second should be bold
http://jsfiddle.net/Dbudt/5/
Please advice
Updated demo
I've added .active class so you can use it on span on the page you need.
I've also fixed the padding for span.step_off
UPDATE
I fix the background-position for the last element.
Related
I want to make CSS animation, based on this example. It fits me perfectly, however there are 2 things that I couldn't make. First - I want customize inner side of greeting card with two jpg files (inner-left, inner-right). Second - I want card open on click, and not click and hold.
I have tried to make it myself with trials and errors but was unsuccessful. If I include third file (inner-left) and make backface-visibility: hidden it's still not giving me required outcome. I have also tried to edit this example but still couldn't make it. For css animation savvys it should be simple, I guess, so please can anyone help me out.
This is html that I am using,
<section class="container">
<div id="card">
<figure class="front"><img src="img_card/1.jpg"></figure>
<figure class="inner-left"><img src="img_card/1-2.jpg"></figure>
<figure class="inner-right"><img src="img_card/1-3.jpg"></figure>
</div>
</section>
and the css part is in jsfiddle link.
It is possible to do this without JavaScript by using a hidden checkbox, a label and the :checked and sibling (+) selectors.
Take a look at this fiddle which also has the inner-left and inner-right images.
I had a quick look at something like this before and I think that might need to be achieved with either a javascript event that adds in a class on click to move your card to its open state.
https://davidwalsh.name/css-flip
The above link goes to an example that shows a single card flipping but it should be close to the concept you are looking for
I hope that helps
In the Carousel Slider at the Evolve Theme, there are a few sample pictures.
How can I change them into new pictures and add an href that an article opens by clicking on an image?
You upload a photo in the media library with the correct dimensions for the slider.
When you select to edit the image you get the full size version.
In Firefox I right click on the image and ask to copy "Image Location", in the Chrome browser "Copy image URL"
that gives me the url to the image in my clipboard something like
http://www.####.###/wp-content/uploads/2013/06/image.jpg
Then you go to the widgets
You have to add the "T4P Carousel Slider" to the Header1 area. If you don't The theme automatically loads its own custom widget for advertizing the theme. Once you add the widget you will get a code box that by default has their code in it.
You are going to replace that code with your own it is not to hard but it is certainly not a drag and drop option.
Once you drag the Carousel Slider to the Header you will see the code.
you will see 4 sections that look like this:
<img src='http://www.####.###/wp-content/themes/evolve/library/media/images/slide/slider_img_01.jpg' alt='' />
<div class='carousel-caption'>
<h4>Built-in Bootstrap Elements let you do amazing things with your website</h4>
You replace this part of the code with the url to the image from the library using cntl-v and ad a alt tag if you like
Before
http://www.####.###/wp-content/themes/evolve/library/media/images/slide/slider_img_01.jpg' alt='' />
After
http://wp.fofc.org/wp-content/uploads/2013/06/baby.jpg' alt='Baby' />
Next you can add a Caption to be over the top of the image
Before
Built-in Bootstrap Elements let you do amazing things with your website
After
This is a really cool image
down at the bottom of the code box you will see additional code.
This controls how may dots are in the rectangular window for navigation one line for each dot
So you want to have as many lines as you have images. If you only have 3 images take the line with data-to='4' completely out. or you can add another line at the bottom:
5
<div id='carousel-nav'>
<a href='#myCarousel' data-to='1' class='active'>1</a>
<a href='#myCarousel' data-to='2'>2</a>
<a href='#myCarousel' data-to='3'>3</a>
<a href='#myCarousel' data-to='4'>4</a>
-- add or remove lines above this line
</div>
This controls the navigation box in the lower center of the slider. However the dot does not seem to move as the slides change automatically. The dot only moves when you click on it.
If you prefer you can remove the entire div from the code and that will remove the navigation box.
Hope this helps.
I have spent hours to think how to get this thing working without any success , what I want to add background image to selected paragraph in tiny mce, I can do that using style dropdown in rich text editor but I want to extend that image dynamically when the selected paragraph text extend. This can be done using 3 divs like:
<div id="top"></div>
<div id="center"><p></p></div>
<div id="bottom"></div>
But the issue is I can't do that using rich text editor tiny mce, and I want to give that ability to front end user who can just select the paragaraph and set the styling from dropdown in order to show the background image to that paragraph on the website, I have included the background image just for guidance, can any one provide any assistance or suggestions on how to get this thing working. Here's the background image:
you can use the 'Template' plugin for TinyMCE
or 'MySnippets' package for TinyMCE
hope this helps
I have to create a hovering effect wherein when a tab is hovered the entire background of the tab should be White. But as can be seen in below SS, , hovering affect is getting applied only to the text part.
I have also attached the CSS from Chrome Web developer.
HTML code generating that tab is ,
<li>
<a class="last_menu" href="#"></a>
</li>
I have tried adjusting with padding element. But, text is also moving with it. I want text to be at center and only hovering to be expanded to occupy whole tab space.
Install Web Developer Toolbar Go to CSS > Display Style Information or <ALT+SHIFT+Y>(it's the wand in the toolbar). Hover your mouse over the element in question to get a detailed picture of how it's being rendered. Study this. Make it your friend.
Try applying a class to the list item itself, then under the hover pseudoselector for that specify a white background.
I want to go different DIV in another file using Anchor tag.
Like->
Click Here to go to another div
And Different_File.aspx will have some div as <div id = "thisDiv"> </div>
The way I have shown does not work :(
Whats wrong with it ??
I know its simple but I am not able to do it.
Hi check to live demo
http://jsfiddle.net/rohitazad/WNzfT/4/
if you put the next anchor link in your web page
than
as like this
click here