I’m learning Drupal 8, HTML and CSS.
I recently migrated our Drupal 7 site to a Drupal 8 site.
https://eerr.org.uk/ (Drupal 7 site)
http://d8-dev.eerr.org.uk/ (Drupal 8 site)
I’m having problems getting simple things like the text to line up. Some things seemed to be controlled in Drupal (Appearance > Settings ). Others I guess I need to change the CSS files.
I’m using a barrio theme based on bootstrap 4.
I’d like to get the Logo left justified with the other headings (as it is on the original site), can someone help me out explaining how to do this ?
I think it needs to be within the div with the container class but I don’t see how to easily change that.
I was able to to put the nav bar in the container in Drupal settings:
Appearance > Settings > Components > Navbar Structure
Tick: Navbar width container
Check if navbar width will be inside container or fluid width.
Mark
Related
I am having a problem with displaying my navbar within my Joomla 3 website when resized to a tablet/mobile size.
For some reason I have a grey nav button appearing on the left and when i click this a blue nav bar appears on the right hand side with the menu then dropping down.
How can i make it so that I have either the grey or blue box and then when clicked the dropdown appears but all from one side.
I am confused as to why both are appearing.
When checking with firebug, I can see that one is navbar pull-left class and the other class is nav-collapse.
There are several variables to deal in this matter.
First, make sure version of bootstrap want to use and what you're really using.
Second, if you want to use the bootstrap version 3, make sure it is not charging well, version 2, which is the default Joomla brings. This will you manage in your template.
Third, you may also need an override of template for the code generated by joomla, run right.
I leave part of the code that you need for all this.
Get bootstrap 3 in joomla template. Copy js and css files to directorys and...
$doc->addScript($tpath.'/js/bootstrap.min.js');
$doc->addStyleSheet($tpath.'/css/bootstrap_3.css');
To avoid conflicts, how not to load js files it is as follows:
unset($doc->_scripts[$this->baseurl.'/media/jui/js/bootstrap.min.js']);
In this case, we remove the bootstrap.min.js joomla file loaded by default.
Which is the best way to convert/change an existing drupal site to a responsive pattern? I have searched lot, but not getting any right direction or guideline. My current site is running with drupal 7 and zen theme. Do I need to change the theme to responsive one like bootstrap or there have any other better solution.
I think you got the answer in your question! I used the Bootstrap theme for Drupal to make my websites responsive. It works perfectly. You can find it here:
Bootstrap project for Drupal
The theme is shipped with sub-theme starter kit you can use to pimp your own theme safely.
You don't convert the Drupal site but the HTML output, to responsive.
How the HTMl is generated (the Drupal theme) is not relevant.
Regardless of what theme you are using, something that I found useful is just open your website in Chrome, and using Developer tools, I add media queries as required to a new CSS, fixing only what looks too cluttered or small in the simulated device.
Some steps include:
Add a new folder to workspace (Sources tab)
Add a local (initially empty) css link to the drupal header (to work with the actual site, or you'll have to take the task to generate an off-line version of your site, fixing all the links to point to your local computer, or to setup that theme in a local server, as MAMP)
replace all the WIDTHs from container that prevent the site to be reduced with the browser's viewport (as you reduce the window size) with MAX-WIDTHs (same value), and set a new WIDTH to 100%. Now your design will be flexible under the original width.
hide, float, or change the position of divs to flow nicer with the new viewport width.
A trick I use a lot with big marketing elements (not article content with lots of text) is to make them elastic, so they look always the same relatively to the viewport. To accomplish that: re-define font-sizes AND all dimensions in em. Then and add "font-size: 1vw;" to the first parent that can be proportional to the viewport's width or matches the full viewport, and when your viewport resizes, all the elements will scale as well.
setup a few classes as .mobile-hidden or .desktop-only to hide/show redundant elements in mobile view.
(Obvious) make texts bigger and add give enough padding to small elements to be easily touchable.
Then just upload your CSS to the theme and change the url in the link you created before in the header.
Voilá: responsive theme.
Note: Keep in mind many scripts these days modify the DOM and new elements might need to be styled later, once you run some cart, or functionality which generates/changes elements and their styles.
Good luck.
Currently creating a single page responsive website in drupal 7 ,after making the page responsive ,added a block with two regions aboutus and ethics side by side that is in two column.
While reducing the browser width ,the content still remainas it is !!! I want the region about us to be below ethics ,but i am not aware how to do!!
Can anyone guide me with the aforestated question.
You can use float:left on both elements and give them a fixed width.
When the page is reduced enough they will automatically stack.
I am just starting out to learn how to implement a DotNetNuke website. I have installed everything and got the starter-site up and running and have started off by attempting to change a few bits and pieces to get a feel of how it works.
I've added a menu item to the existing menu (Admin --> Page Management --> Add Page (and then added 8 sub-pages underneath)
Under the Appearance of the new menu item I've given it a Skin of "Host: DarkKnight - 3-Column-Mega-Menu"
The sub-pages or submenu now appears on mouse-over no problem, however the font-size of the submenu items is way to big and I cannot for the life of me figure out where / how to change this.
I am using the latest download of DNN (which I think is version 6)
Appreciate any guidance.
You need to modify the dnnmega.css file in /portal/Portals/_default/Skins/DarkKnight/DNNMega.
in this line change font-size value:
ul.dnnmega li.category a span{display:block;font-size:18px;color:#686868;border-bottom:1px solid #e5e4e4;margin:0 14px 0 18px;padding:0;}
You test other modifies and see.
For change the number of coloumns (if there are more submenus) and other behaviours you need to edit the jquery.dnnmega.debug.js ( and jquery.dnnmega.js )
I am currently making a design where a CKeditor is managing the content in a 960px wide container. Well the content inside that box is in two columns, which is just two divs, that is styled with div:first-child and div:nth-child(2) .. What I want is to make the CKeditor have these to div's pr. default and have them styled as in my frontend design - is that possible??
You can either edit /contents.css to reflect the final look within the editor, or load in a different CSS file for editors using CKEDITOR.config.contentsCss = '/path/to/editors.css';. Default content is probably easier to implement as part of the CMS you're using.