I want to add a logo to the top right corner of my morea generated pages.
I am not sure which file I need to modify or how, can you please advise?
Morea is based upon Bootstrap 3.3, so you'll need to use those CSS classes to provide a right-justified logo.
To insert a logo, you need to modify the code for the items in the navbar, which is located in the core.html file. Here is the code for the default navbar:
https://github.com/morea-framework/core/blob/master/src/_layouts/core.html#L69-L89
What you'll need to do is create a new itemized list right after the current list that creates a right justified navbar item. For example, I inserted this code starting on line 90 of that file in one of my local Morea sites:
<ul class="nav navbar-nav navbar-right">
<li>LOGO</li>
</ul>
And when I re-run morea-run-local.sh, the navbar looks like this:
Obviously, the formatting needs help, but you can investigate the Bootstrap 3.3 docs to figure out the best way to display your logo. Good luck!
Related
Does anyone know how to get rid of these lines separating the menu items? I've been looking under the .dropdown-menu class in the bootstrap css, but I can't find anything that will alter the lines.
the default nav bar drop down menu doesn't look like this
see an example : https://getbootstrap.com/examples/navbar/
it may be another css file you include in your project that cause this effect
Im not really a pro in bootstrap. Im trying to set a bootstrap navbar menu with dropdowns, I found on line a great exemple: mega dropdown menu that actually satisfies my needs [the link to mega dropdown menu]15351 . The problem is, when I try to add another menu element (dropdown), the dropdown is displayed in a wrong position ! (under an other existing menu element). I tried editing the css but I haven't achieved my aim yet !
To test what Im talking about you try to add a drop down menu element and see what happens.
I would appreciate it if you guys could help me with that.
place the dropdown between last endindgs.
</li>
<li class="dropdown dropdown-large">
-----place any lists-----
</ul>
</div><!-- /.nav-collapse -->
I would like to add a number of avatars spaced equally and horizontally with the "Add" icon at the end. How can I achieve this in Zurb Foundation 5.5? I'm also using AngularJS.
Apologies I'm still quite new to the framework. Would I use a grid?
You can use the block grid:
http://foundation.zurb.com/docs/components/block_grid.html
You simply loop through the images and right after the loop you can render a final <li>ADD Button</li>
Or... you can use Clearing
http://foundation.zurb.com/docs/components/clearing.html
Again looping through the images and right after the loop render the final <li>ADD Button</li>
Maybe the question is silly, but I just start to look into Drupal and I cannot find any relatives information on the web.
I have installed a theme (corporate clean) that use a inline main navigation just after the logo and before the gallery.
I would like to change that menu position. Move the main menu on the left side.
But everytime I give to navigation or main menu block the 'navigation' position, I see a new block filled in with the same main menu links.
Instead I want the first link be relocated in the left side.
How could I do that?
(btw the theme has even a navigation block, but it cannot understand how it work exactly..)
thanks
The menu is usualy inserted in the page.tpl.php you can move it around in this file.
Alternatively you can go to admin/appearance/settings/yourTheme and turn off "Main menu" and "Secondary menu" and use the Menu block module to position menus where you want them.
Do you mean you want the main menu (that is initially in the "navigation" area, like horizontally) in a new column on the left side, like vertically?
If yes, just go in administration>structure>blocks and drag your "Main Menu" in "First Lateral Bar" area (under Content, in Coporate Clean theme). Save and check the result.
If not, do you want your Main menu just like it is now but aligned left instead of right? If yes, just play with CSS.
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.