-
Hi there,
After adding my logo, I have noticed that the logo is not align with the main menu text. I mean, it is aligned but the problem is that the logo itself contains text so it appears as not being aligned. How can I change the vertical position of the main menu text?
I am attaching a screenshot. Can you please advise?
Thanks
Tom,
The problem is that whoever desiges the JA templated did not take under consideration that logos may be big with presence. Therefore, the templates` logo shrinking mechanism would not work for all logos.
To make a long story short, I need you to tell me how to make the attached logo fit into:
http://tamirdwh.funet.co.il/subdomains/dwh/main/
In addition, please have a look at my prod site in:
http://tamirdwh.funet.co.il/web2 with Shape5 template.
Many thanks,
Tamir
Customize logo: size, alignment – T3[/h]
The docs is for templates developed with T3 Framework. In the docs, we implement in JA Bookshop
#1: Change logo block size[/h] By default, Logo of templates developed with T3 Framework is declared in the templates/ja_template/tpls/blocks/header.php file. Open the file and you will see how Logo is declared.
- <!– LOGO –>
- <div class=”col-xs-12 <?php echo $logosize ?> logo col-sm-6″>
- <div class=”logo-<?php echo $logotype ?>”>
- <a href=”/<?php echo JURI::base(true) ?>” title=”<?php echo strip_tags($sitename) ?>”>
- <?php if($logotype == ‘image’): ?>
- <img class=”logo-img” src=”/<?php echo JURI::base(true) . ‘/’ . $logoimage ?>” alt=”<?php echo strip_tags($sitename) ?>” />
- <?php endif ?>
- <span><?php echo $sitename ?></span>
- </a>
- <small class=”site-slogan hidden-xs”><?php echo $slogan ?></small>
- </div>
- </div>
- <!– //LOGO –>
You can change the logo block size on responsive layouts by changing the values of col-ms-, col-xs- and col-md-
- col-xs- size on extra small screens like mobile
- col-ms- size on small screens like tablet
- col-md- size on medium screen like desktop
#2: Change logo size[/h] Open file in templates/ja_template/less/style.less, find the style for logo image – .logo-image
- // Logo Image
- // ———-
- .logo-image {
- width: 250px;
- height: 30px;
- overflow: hidden;
- margin: (@t3-global-margin/4) (@t3-global-margin * 2) (@t3-global-margin / 4) @t3-global-margin;
- //hide sitename and slogan
- span, small {
- display: none;
- }
- @media (max-width: @screen-sm) {
- margin: (@t3-global-margin / 2) (@t3-global-margin * 2) (@t3-global-margin / 2) (@t3-global-margin * 3);
- }
- }
Now change the values of width and height.
#3: Change logo alignment[/h] In the style.less file, add text-align style for the .logo-image.
- // Logo Image
- // ———-
- .logo-image {
- width: 250px;
- height: 30px;
- text-align: center;
- overflow: hidden;
- margin: (@t3-global-margin/4) (@t3-global-margin * 2) (@t3-global-margin / 4) @t3-global-margin;
- //hide sitename and slogan
- span, small {
- display: none;
- }
- }
See the front-page
Check out video tutorial here: https://www.youtube.com/watch?v=8Qh7ZClcLU4hi,
OK, so the issue was summed up to one small thing. how to erase the line marked with green sqaure?
I am attaching a screenshot.
Tnx
Viewing 13 posts - 1 through 13 (of 13 total)This topic contains 13 replies, has 3 voices, and was last updated by
Saguaros 10 years, 5 months ago.
We moved to new unified forum. Please post all new support queries in our New Forum
need to align logo to main menu text
Viewing 13 posts - 1 through 13 (of 13 total)
