Editing (v7+)

Site wide Name

Permalink September 07, 2018 at 8:36 AM

Hi, I am using theme Neat and am trying to use a .png file as the Site Wide name and centre it within the header block.
The problem I am having is that Neat seems to be stretching the .png file and not centering it. Any help would be appreciated.

<!DOCTYPE html>
<html class="ccm-toolbar-visible ccm-panel-ready" lang="en">
<head>
<title></title>
<style>
* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
img {
   border: 0;
}
img {
   vertical-align: middle;

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

 <!DOCTYPE html>
<html class="ccm-toolbar-visible ccm-panel-ready" lang="en">
<head>
<title></title>
<style>
* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
img {
   border: 0;
}
img {
   vertical-align: middle;
}
.site-name img {
   max-height: 80px;
}
div.ccm-page img {
   max-width: 100%;
   height: auto;
}
p {
   margin: 0 0 10px;
}
p, ul, ol, pre, table, blockquote {
   margin-top: 26px;
   margin-bottom: 26px;
}
.site-name, .site-name h1, .site-name h2, .site-name h3, .site-name h4, .site-name h5, .site-name h6, .site-name a {
   font-size: 33px;
   line-height: 104px;
   font-weight: 700;
   color: #444;
   text-decoration: none;
   margin: 0;
   display: inline-block;
   vertical-align: top;
}
.site-name, .site-name h1, .site-name h2, .site-name h3, .site-name h4, .site-name h5, .site-name h6, .site-name a {
   font-family: Helvetica,sans-serif,sans-serif;
   font-size: 37px;
   color: #4a4846;
   font-weight: 700;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block;
}
.navbar {
   position: relative;
   min-height: 50px;
   margin-bottom: 20px;
   border: 1px solid transparent;
}
.primary-nav .navbar {
   border: none;
   margin-top: 0px;
   margin-bottom: 0px;
   font-weight: 400;
   background: transparent;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
   position: relative;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
}
.row {
   margin-right: -15px;
   margin-left: -15px;
}
.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}
.primary-nav, .primary-nav a {
   color: #e9dbdb;
   text-decoration: none;
}
.site-header {
   box-shadow: 0px 1px 6px rgba(0,0,0,0.25);
   position: relative;
   z-index: 10;
}
.site-header, .navigation {
   background-color: rgba(179, 197, 237, 0.3);
   color: #e9dbdb;
}
div.ccm-page {
   padding-top: 48px !important;
}
html.ccm-panel-ready div.ccm-page {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-transition: -webkit-transform cubic-bezier(.19, 1, .22, 1) .5s;
   -moz-transition: -moz-transform cubic-bezier(.19, 1, .22, 1) .5s;
   -o-transition: -o-transform cubic-bezier(.19, 1, .22, 1) .5s;
   transition: transform cubic-bezier(.19, 1, .22, 1) .5s;
}
body {
   margin: 0;
}
body {
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
   font-size: 14px;
   line-height: 1.4285;
   color: #333;
   background-color: #fff;
}
body {
   font-weight: 400;
   font-size: 16px;
   line-height: 26px;
   color: #444;
   min-width: 320px;
}
body {
   font-family: Helvetica,sans-serif,sans-serif;
   font-size: 18px;
   color: #242222;
   font-weight: 500;
}
html {
   font-family: sans-serif;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
}
html {
   font-size: 10px;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>
</head>
<body><div class="c5wrapper ccm-page page-type-page page-template-full"><header class="site-header"><div class="primary-nav"><div class="container"><div class="row"><div class="col-sm-12"><nav class="navbar" id="main-nav"><div class="navbar-header"><div class="site-name"><p style="text-align: right;"><img width="750" height="139" style="margin-right: 50px; margin-left: 50px; float: left;" alt="Header2.png" src="/application/files/4915/3549/2202/Header2.png"></p></div></div></nav></div></div></div></div></header></div></body>
</html>

1 Attachment

ConcreteOwl replied on Sep 7, 2018 at 4:29 pm Permalink Reply

In your code you are wrapping the image inside <p> </p> tags and the inline css is declaring that this is "text-align: right"
Try "text-align: center"

swinn replied on Sep 8, 2018 at 8:25 pm Permalink Reply

Thanks for that, I have tried this but it has not moved the image to the centre of the page.

ConcreteOwl replied on Sep 8, 2018 at 8:31 pm Permalink Reply

What is the site address?

swinn replied on Sep 8, 2018 at 9:24 pm Permalink Reply

http://www.e1e996ce5616a10aa9e872f28-13636.sites.k-hosting.co.uk/index.php

It is still under construction. I have tried again by putting the code in a customized css file and this has improved it a little but given a few more problems as well as not looking right on mobiles.... Head scratching is beginning to wear my hair out... Thanks for looking at it for me.

ConcreteOwl replied on Sep 9, 2018 at 7:43 am Permalink Reply

Well, looking at this in the browser console I don't see the reason why your image is not aligned to the center.
I have tried manipulating the html and css in the browser console to no avail.
Perhaps one of the other C5 members can spot it?

Gondwana replied on Sep 9, 2018 at 9:14 am Permalink Reply

I reckon it could be .navbar-header's float left, in bootstrap.min.css.

swinn replied on Sep 9, 2018 at 1:57 pm Permalink Reply

Thanks for looking... I thought it was perhaps just me going crazy.

swinn replied on Sep 9, 2018 at 1:58 pm Permalink Reply

Thanks for that but everything in bootstrap.min.css is starred out so unless there is another file of the same name I don't think that can be the issue.

Gondwana replied on Sep 9, 2018 at 8:15 pm Permalink Reply

I can get the header image to move by over-riding that CSS at element level (eg, setting the .navbar-header div to float right), so I reckon that element is responsible.

swinn replied on Sep 9, 2018 at 8:33 pm Permalink Reply

Thanks, but where do I find this to make an alteration?

Gondwana replied on Sep 9, 2018 at 8:57 pm Permalink Reply

I used Firefox developer tools, although any brower's tools can probably be used to change CSS. I'd experiment with that before attempting changes to the underlying code (which would probably involve editing the theme).

Forums

Editing (v7+)

Site wide Name

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?