I am new to semantic UI (and web development in general) and am looking to implement a design like this:
So to be clear: The bar with icons is always there, the labels for the icons appear only when the mouse is over the menu bar somewhere; label rectangle hoovers over the site content and it does not stretch from top to bottom.
Can anyone give me a tip on how to accomplish this?
Menu/icon bar can be a sidebar that is always visible I guess:
<div class="ui visible left thin sidebar borderless vertical icon menu">
<a class="item">
<i class="search icon"></i>
// Would like label text here
</a>
..etc
</div>
But I don't see anything that can help me with the labels/popup and preferably have the definition of that text in the same item.
Any help greatly appreciated!
As nice as Semantic UI is, we now decided that it not the right framework for us. We are building an technical application, not a regular website, which is all custom design and we would run into issues like this all the time. #Michael: thanks for answering!
Related
Like this one http://vadikom.github.io/smartmenus/src/demo/ but vertical and Bootstrap-style? I am not so good in css to remake it to Bootstrap style (too much css code).
Thanks
Just add data-hover="dropdown" where you'd put data-toggle="collapse".
Update: Sorry I did not understand when you said vertical but now I think I do. So the below will give you a horizontal collapse but you can use that as part of your vertical menu.
You would need to create two tables. One table holds all your buttons/links and the other collapses and un-collapses the panel. For example if you have 10 buttons on the left hand table (10 rows , 1 col). You would have 10 collapsible panels in the right hand-side table which would give the impression of a vertical menu. At least that's how I would attempt it :)
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
The Semantic UI Dropdown documentation gives examples of dropdowns that open to the left and right. However, all of the examples given show a parent dropdown that opens downwards, with the items of that dropdown being themselves dropdown which open to the left or the right. I am trying to create a vertical menu, each element of which is a dropdown that opens to the right. The vertical menu itself should not be a dropdown. I have tried many combinations of arranging the menu, right, dropdown classes and I simply cannot get it to work. Is it possible?
OK, I've discovered that Semantic will do this automatically if you place your dropdowns in a vertical menu:
<div class="ui vertical menu">
<div class = "ui dropdown item">
<span class="text">Prompt</span>
<div class="item">...</div>
...
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'm trying to create a simple rollover with an image to show a tip or info box/bubble.
I have a div wrapper holding the image src, and css to style/position the wrapper and child.
I just can't figure out how to make the img src interactive.
Here's the html:
<div class="wrapper">
<img src="images/gallery/wheat3.png" width="250" height="250" data-stellar-ratio="3.5" data-stellar-vertical-offset="200">
</div>
I want to create a rollover with the image "wheat3.png" to show and info box at the side.
Here's the test link as well:
http://hatfielddesign.com/witbier_test/
Thanks.
Viewing the source code of the test link you've shown, seems like they uses Stellar.js to implement this effect. Take a read at the docs, they may help you ;)