Themes

Problem with core Theme Elemental in Concrete5.7.1

Permalink October 28, 2014 at 10:50 AM

Hello i have the problem with the navbar in the theme: elemental (Core theme)

Please watch the Attachment. I Want the Navigation in one line without sublinks.

Please help me

greets

1 Attachment

MrKDilkington replied on Oct 28, 2014 at 2:05 pm Permalink Reply

hi wmdesign,

Someone else had a similar question recently.
http://www.concrete5.org/community/forums/5-7-discussion/block-cell...

The width of your sitewide global areas are controlled by the Boostrap grid.

It looks like your logo isn't very wide, so you could remove one or possibly two grid units from it and give them to your navigation.

Before modifying the theme, make sure to back up any files you change.

To change the grid units, you need to open header.php in your Elemental theme.
concrete\themes\elemental\elements\header.php

This is the area you will change:
default unmodified

<header>
    <div class="container">
        <div class="row">
            <div class="col-sm-4 col-xs-6">
                <?php
                $a = new GlobalArea('Header Site Title');
                $a->display();
                ?>
            </div>
            <div class="<?php if ($displayThirdColumn) { ?>col-sm-5 col-xs-6<?php } else { ?>col-md-8 col-xs-6<?php } ?>">
                <?php
                $a = new GlobalArea('Header Navigation');
                $a->display();
                ?>
            </div>

Viewing 15 lines of 21 lines. View entire code block.

 
<header>
    <div class="container">
        <div class="row">
            <div class="col-sm-4 col-xs-6">
                <?php
                $a = new GlobalArea('Header Site Title');
                $a->display();
                ?>
            </div>
            <div class="<?php if ($displayThirdColumn) { ?>col-sm-5 col-xs-6<?php } else { ?>col-md-8 col-xs-6<?php } ?>">
                <?php
                $a = new GlobalArea('Header Navigation');
                $a->display();
                ?>
            </div>
            <?php if ($displayThirdColumn) { ?>
                <div class="col-sm-3 col-xs-12"><?php $as->display(); ?></div>
            <?php } ?>
        </div>
    </div>
</header>

1. try taking one grid unit from the "Header Site Title"
col-sm-4
<div class="col-sm-4 col-xs-6">
change to:
col-sm-3
<div class="col-sm-3 col-xs-6">

2. give that grid unit to "Header Navigation"
col-sm-5
<div class="<?php if ($displayThirdColumn) { ?>col-sm-5 col-xs-6<?php } else { ?>col-md-8 col-xs-6<?php } ?>">
change to:
col-sm-6
<div class="<?php if ($displayThirdColumn) { ?>col-sm-6 col-xs-6<?php } else { ?>col-md-8 col-xs-6<?php } ?>">

<header>
    <div class="container">
        <div class="row">
            <div class="col-sm-4 col-xs-6">   <!-- col-sm-4 to col-sm-3 -->  
                <?php
                $a = new GlobalArea('Header Site Title');
                $a->display();
                ?>
            </div>
            <div class="<?php if ($displayThirdColumn) { ?>col-sm-5 col-xs-6<?php } else { ?>col-md-8 col-xs-6<?php } ?>"> <!-- col-sm-5 to col-sm-6 -->
                <?php
                $a = new GlobalArea('Header Navigation');
                $a->display();
                ?>
            </div>

Viewing 15 lines of 21 lines. View entire code block.

 
<header>
    <div class="container">
        <div class="row">
            <div class="col-sm-4 col-xs-6">   <!-- col-sm-4 to col-sm-3 -->  
                <?php
                $a = new GlobalArea('Header Site Title');
                $a->display();
                ?>
            </div>
            <div class="<?php if ($displayThirdColumn) { ?>col-sm-5 col-xs-6<?php } else { ?>col-md-8 col-xs-6<?php } ?>"> <!-- col-sm-5 to col-sm-6 -->
                <?php
                $a = new GlobalArea('Header Navigation');
                $a->display();
                ?>
            </div>
            <?php if ($displayThirdColumn) { ?>
                <div class="col-sm-3 col-xs-12"><?php $as->display(); ?></div>
            <?php } ?>
        </div>
    </div>
</header>

If taking one grid unit doesn't give you enough space, try taking two grid units to give to "Header Navigation".

To truly understand what is going on, I recommend going to the Bootstrap site and reading about how the grid works.
http://getbootstrap.com/css/#grid...

ebooki replied on Oct 29, 2014 at 7:48 am Permalink Reply

Hello,

thanks for reply. I will test it now. Then i will write here again. And so sorry for my terrible English..
Greetings from Germany (North-Coast).

ebooki replied on Oct 29, 2014 at 8:18 am Permalink Reply 1 Attachment

Sorry.. i do it but i dont see any effect. See the picture. What can i do now? i think the new concrete is great, but out of the box theme is difficult to work on it?? (At the header and footer)

ebooki replied on Oct 29, 2014 at 8:48 am Permalink Reply 1 Attachment

it works!!

i must change the Theme in:
/html/con57/updates/concrete5.7.1/concrete/themes/elemental/elements

:-)
Thx for your help!!

so i can finish the new site in a few days^^

mhawke replied on Oct 29, 2014 at 12:25 pm Permalink Reply

I wish I could share your optimism. Unfortunately, all your changes will be ignored when you upgrade your site to version 5.7.2 (recommended)

Here's what I would suggest you do to make your changes 'update-proof'

1) Copy your whole 'updates/concrete5.7.1/concrete/themes/elemental' folder into 'application/themes/elementalcustom'

2) Open the 'application/themes/elementalcustom/description.txt' file and change the first line to 'Elementalcustom'. I also changed the second line to indicate that this was a copy of the core Elemental theme.

3) Open the 'application/themes/elementalcustom/css/main.less' and change line 6 to be:

@import "../../../../concrete/css/build/core/include/mixins.less";

4) Open the 'application/themes/elementalcustom/page_theme.php' file and change the first line to "namespace Application\Theme\Elementalcustom;"

5) Visit 'Dashboard->Pages and Themes' and install/activate your new Elementalcustom theme.

Make all future changes to your theme files in the application/themes/elementalcustom folder

ebooki replied on Oct 31, 2014 at 10:02 am Permalink Reply 1 Attachment

Hello,

it dont work here.

i do it step to step and then after install i get a:

File `../../../../../css/build/core/include/mixins.less` not found. in main.less

i dont find why?

mhawke replied on Oct 31, 2014 at 10:10 am Permalink Reply

Sorry, you have to add 'concrete' to that path so line 6 of

application/themes/elementalcustom/css/main.less

@import "../../../../concrete/css/build/core/include/mixins.less";

I have edited this in my step-by-step post above.

ebooki replied on Oct 31, 2014 at 10:17 am Permalink Reply

Hello,

at my (server/webhosting) it dont work.. now i want to install the theme, the side become a 404 at install..

so i cant install this theme^ mhh what do i wrong?

jamesleech replied on Oct 28, 2014 at 8:34 pm Permalink Reply

You could also delete the search block ...

Good to see some discussion around this core theme. Not a good look for people new to C5 to start with something that is kinda not right out of the box.

I'm sure the C5 team is frantic with other stuff but hopefully these niggling aspects can be ironed out for future default installs.

MrKDilkington replied on Oct 30, 2014 at 2:00 am Permalink Reply

The theme works as expected. Areas aren't resizable in Edit Mode - they are controlled by the underlying CSS.

With the requirement of websites to be responsive these days, there comes a point where CSS has to be edited. You can only do so much with a basic theme before you have to customize it.

meswaramarco replied on Nov 3, 2014 at 3:40 am Permalink Reply

Agreed. Where is the underlying css for the basic elemental theme?
Are they here ?

/concrete/themes/elemental/css

Bunch of less files ?

Is this the file for the lemental theme -> /concrete/themes/elemental/css/presets

jincmd replied on Dec 17, 2014 at 3:11 pm Permalink Reply

Perhaps you could try and help me here....On the Elemental theme, I would like to replace my sitewide search box with a company contact number. I've moronically replced the generic "sitewide header search" code with

$a = new GlobalArea('Head Conact');
$a->display();
?>

This has no style, so my litttle search area is gone.... simply put, I just want to replace the clean search bar, with a clean font displaying a business number. THanks for the read and help if presented or not

mhawke replied on Dec 18, 2014 at 10:14 am Permalink Reply

So why not just add a Content block to the area where the search block used to be and put your business number in there?

Forums

Themes

Problem with core Theme Elemental in Concrete5.7.1

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?