Jump to content

Archived

This topic is now archived and is closed to further replies.

interpro

Some questions on changing elements of layout

Recommended Posts

interpro
Website URL: http:demo.interpromote.com/test
Framework Version: DMS
WordPress Version: 3.8
Server/Host: DigitalOcean VPS
 
Questions:
 
1. How to increase the vertical height of the top menu bar?
 
2. how to change the background colour and vertical font spacing of the (currently black) footer area?
 
3. how to add a line of text below the footer area?

Share this post


Link to post
Share on other sites
James B

Hi there

 

1. To increase the height of the navbar you'll need to use some custom css to change the height.

 

.navbar, .navbar-inner, .navbar-collapse {
    height: 100px;
}
 

If you've not used css before inside the Framework or DMS, please see the overview and resource links at http://docs.pagelines.com/customize/how-to-customize which will help you get started.

 

2. If you click on the edit icon for the footer area you'll see some options display in the dms control panel. In the area theme drop down you'll see there are some preset options for styling the footer, these will change the background and the text color etc. http://screencast.com/t/2HqqgK2B

 

To set your own custom colors you can give the footer area a custom class using the styling class field, and then insert your color as custom css into the css/less panel. To see an example of coloring sections/areas using this method see - http://docs.pagelines.com/tutorials/section-area-styling

 

You can also use this method to change the font spacing by adjusting the 'line-height' in the css. http://www.w3schools.com/cssref/pr_dim_line-height.asp

 

3. There's no container under the footer to add any additional code, you can add a textbox or other section into the footer at the bottom, but not below by default.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
interpro

thanks very  much for the helpful and detailed reply James, that was exactly the assistance I needed.

 

Could I clarify a bit further, ref to question #1: the menu height has expanded using your suggestion, but the logo element stays the same height as previously - how would I adjust this also?

Share this post


Link to post
Share on other sites
James B

Hi there, glad that worked for you. To move the logo and the nav down within the navbar container you'd use the same process. Using chrome or firebug, you can inspect the element to see see the css code assigned to it. So in this case you'd look at the logo first, find the code relating to the logo position, this will appear on the right hand side of the inspector. Edit the figures until you see it move into the correct position on the screen live as you're making the adjustments. Then copy/paste that code back into the css/LESS panel inside DMS and save. Then you'd go back and do the same process for the navbar menu to move that down.

 

I've recorded a short video cast to show you the process in full.

 

http://screencast.com/t/apg80CFMedNh

 

The code i used in the example above is as follows

 

.navbar .navline.pull-right {
    float: right;
    margin-top: 39px;
    position: relative;
}
 
.navbar .plbrand {
    float: left;
    line-height: 15px;
    margin: 38px 2% 0 0;
    padding: 0 1%;
}
 
Hope this helps.

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
interpro

Yep, it helped thanks!

Just two more things left.

 

1. How to increase the size of the logo? For example by 70%?

2. The search button is still stuck in the top. How to align it in the middle the same way we did with the logo and menu items?

 

Thanks in advance!

Share this post


Link to post
Share on other sites
James B

Hi there, you can use the inspector method i mention above to locate the css for both of those areas, apply padding to the top as we did on the other elements to move it down. To adjust the height of an item you can use the height command and then provide a figure that you feel best fits.

 

{height:__px; } after the class for the item.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
interpro

Thanks for the video by the way - that was very helpful indeed.

 

the logo alignment and size is now fixed using your suggestions, and I learned some useful things with firebug.

 

However, the search field is stubbornly resisting my efforts to adjust its position.

 

For example, following your instructions I can see that CSS properties for the search icon are contained in the following class:

.searchform .searchfield {

I've tried adding (as you did in the video) margin-top:40px; to the end of the CSS - the strange thing is, when I do this in Firebug, it repositions correctly. However when I copy paste the whole chunk of CSS (below) into LESS/CSS, it doesnt budge on the production website.

.searchform .searchfield {
  -webkit-transition:all 0.7s;
  background-color:#FBFBFB;
  background-image:url(http://demo.interpromote.com/test/wp-content/themes/dms/images/[email protected]);
  background-position:4px 50%;
  background-repeat:no-repeat no-repeat;
  background-size:14px;
  border-bottom-left-radius:13px;
  border-bottom-right-radius:13px;
  border-color:#EBEBEB #E4E4E4 #E4E4E4 #EBEBEB;
  border-style:solid;
  border-top-left-radius:13px;
  border-top-right-radius:13px;
  border-width:1px;
  box-shadow:rgba(255, 255, 255, 0.2) 1px 1px 0 inset;
  float:right;
  font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, serif;
  font-size:11px;
  height:23px;
  line-height:1.2em;
  margin:0;
  padding:5px 5px 5px 12px;
  text-indent:30px;
  transition:all 0.7s;
  width:23px;
  margin-top:40px;
}

Any idea what I might be doing wrong here?

 

http://demo.interpromote.com/test/

Share this post


Link to post
Share on other sites
James B

Hi there,

 

Sometimes there could be code further down which overrules the instructions you've put in. You can use the override !important to force the changes through. Example below.

 

.searchform .searchform {
    margin-top: 45px !important;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
interpro

I tried adding !important, but it didnt seem to make any difference.

 

I noticed that after I paste the changes into LESS, when I refresh the page and inspect the element, none of the new values are visible for the search field.

 

I also noticed (re: your comment that there could be other code that overules) that there is already a margin set of variable in the CSS i pasted into LESS. I tried modifying the following line instead of adding a new one:

 

.searchform .searchfield {
margin: 40px 0px 0px 0px !important;
}
 
But when applied, page refreshed, I still don't see any of the changed variables visible when I inspect the element. Any reason you can think of as to why these instructions don't get passed onto the page?

Share this post


Link to post
Share on other sites
James B

When you go back into the css/less editor panel, is that css still showing in the panel or is it blank? Usually if css is still in the panel but not taking affect on the live page there will be an error in your css code, something wrong further up in the code you've pasted will stop any of the code below it from being read, check that your css is correct and that each code block has the correct closing brackets etc.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

×