Copyright Overlap and Front Page scaling « Support Forum | Kriesi.at

Support Forum » Flashlight

Copyright Overlap and Front Page scaling

16 posts from 3 voices

Started 6 months ago by chewyuk
Latest reply from Ismael
This topic is not a support question

Tags:

chewyuk
Member

Hi,

Terrific theme, I am impressed. I need a few small tweaks.

1. The copyright information on my front page is overlapping, I need it to appear clear without any overlap. Can you resize or increase the width of the menubar by a few pixels to allow the full copyright URL to be seen?

2. Can you scale the menu's with the background image, the front page doesn't scale at all well. The mini content area looks poor when a smaller res is used.

3. What the easiest ay to add a discreet footer at the bottom of the page?

4. Can I reduce some of the white space on top of the mini content area on the front page please.

My live url is http://www.landscapesuncovered.com

Cheers,
Neil

Posted 6 months ago #

Ismael
Moderator

Hi,

1.) Hi you can adjust the inner sidebar by doing this on your custom.css

.inner_sidebar {
    width: 260px;
}

.arrowslidecontrolls_fullscreen {
    width: 230px;
}

2.) What do you mean by scaling the menu with the background image?

3.) Open sidebar.php and duplicate this code

echo "<div class='hide_content_wrap hide_content_wrap_copyright '>";
				echo "<span class='copyright'>".__('&copy; Copyright','avia_framework')." <a href='".home_url('/')."'>".get_bloginfo('name')."</a></span>";
				echo "</div>";

4.) To change the top padding of the mini content just copy this on your custom.css

.box {
    padding-top: 10px;
}

Regards,
Ismael

Posted 6 months ago #

chewyuk
Member

Thanks for the reply, I'll add all of those snippets of code shortly and let you know how I get on.
In terms of point 2.

If you amend the screen size in Chrome by amending the size of the window pane, the background image resizes but the mini content area stays the same size. I like that to scale with the picture size change at the same time. It remains the same size whilst the background image reduces in scale, leaving a rather large mini content area dominating the majority of the screen real estate.

Posted 6 months ago #
chewyuk
Member

Update after adding code:

1. Made no difference at all. I need to pull back the copyright url to the left hand side without impacting any other element on the menu.
2. see not above.
3. Added but right at the bottom of the file, hans't made a difference I'm sorry.
4. This code also moves the main menu on the left side. I only want to lose the padding on the mini content area only, the left hand menu can remain as it is.

Posted 6 months ago #
chewyuk
Member

Update on point 1 - In fact moving the sidebar out, messes up the other pages linking from the sidebar.
The white sidebar then extends into the page content.
I need code that pulls the location of the copyright symbol back back enough pixels to display the url properly without impacting anything else please.

Posted 6 months ago #
Nick
Moderator
Hi,

1) You are using an image that will distort since its aspect ratio is so different from most screen sizes. Please try using this version of the same image i made for you ( http://www.mediafire.com/?0occucpczr672gf ) (that's 1680 x 1050. When it fills the screen it will do so much better than trying to enlarge an image this many times.

2) The functionality you describe is currently not a part of the theme (at the moment). It would require rewriting the sidebar and the content area code and styling and is beyond the scope of the support team

3) Excellent easy to follow illustrated tutorial on adding a footer -> http://www.wpsquare.com/add-3-column-footer-wordpress-theme/

4) To change the size of the left sidebar, the base and the top please add this to Quick CSS.
```
.inner_sidebar {
width: 188px; /*was 220*/
}

#top .logo, .logo a {
left: -16px; /*was 0*/
}
.arrowslidecontrolls_fullscreen {
padding: 10px 5px;
width: 178px;
}
```
The code below will reduce the padding of the content area
```
.box {
padding: 15px 15px 15px 15px;
}
```
Thanks,

Nick
Posted 6 months ago #
chewyuk
Member

Hello,

1. How will the aspect ratio of a photo impact the menu size, seeing that the menu doesn't scale?
It's the menu code that needs to be changed not the image surely?
Anyhow I have added your code, see website http://www.landscapesuncovered.com and it's just effected the background to the sidebar, not the white element, so the issue reamins.

2. Thats a shame? Are there any plans? Clearly using this theme with a mobile is impossible then? As the mini content area will dominate?

3. Thanks. But will leave it alone now until I have fixed copyright issue. See 1.

4. Thanks. Happy with outcome.

Posted 6 months ago #

Nick
Moderator

Hi,

Oh, I am sorry, I just noticed the copyright, my screen size is not large so it was completely hidden! I think it would be easiest to revert back to the original templates since things are a little out of wack, but lets give this a try:

.sidebar {
margin: 0;
padding: 10px 0 0 0;
width: 220px;
top: 0;
}
#main ul{
margin-bottom: 0px;
}
.copyright {
position: relative;
display: inline-block;
right: 60px;
top: 10px;
}
.social_bookmarks {
height: 24px;
border: medium none;
display: inline-block;
float: left;
list-style-type: none;
list-style-position: outside;
left: -10px;
top: 30px;
position: relative;
}
.hide_content.no_scroll {
top: -20px;
position: relative;
}

I dont think that Flashlight is a responsive theme. http://www.kriesi.at/support/topic/turn-flashlight-responsive

Thanks,

Nick

Posted 6 months ago #

chewyuk
Member

Nick - Getting there! The full url is now visible on the page, but it is very much out of sync and messy with the menu items. Including pushing the SM buttons all over the place. It's also effected the media background buttons on the bottom of the page.

Posted 6 months ago #
chewyuk
Member

Anyone, please?

Posted 6 months ago #
chewyuk
Member

Come on guys, just one small tweak needed please and I can then make the site live.

Posted 6 months ago #
Nick
Moderator
Hi,

Sorry. Looking at it now.

Please add this to Quick CSS, ***please make sure you add it BELOW the previous code we gave you***
```
.sidebar {
top: 10px;
}
.social_bookmarks {
left: 0px;
top: 20px;
}
.copyright {
right: 75px;
top: -15px;
}
```
Now it will look beautiful

Nick
Posted 6 months ago #
chewyuk
Member

So close! Sorry to be PITA, but the balance looks a bit odd. Can you split the two words and still contain a single url link? So maybe landscapes is above uncovered? and the copyright sign on top of both of them. This way they will then all align to the right hand side of the control bar, like the slider copy too.

Posted 6 months ago #
Nick
Moderator
Hi,

I can't do that, but you can. Wherever you put the URL for the copyright, add the code below in between the two word
```
<br>
```
so that it looks like
```
<a href="http://www.landscapesuncovered.com/">Landscapesuncovered.com</a>
```
You can also try it like this.
```
<a href="http://www.landscapesuncovered.com/">Landscapes</a><a href="http://www.landscapesuncovered.com/">Uncovered.com</a>
```
However, if you do that, please take all the customization off, as it will fit in the same place as the link on the demo. In fact that would be preferable. I am unable to test what everything looks like on large screen monitors.

Thanks,

Nick
Posted 6 months ago #
chewyuk
Member

Ha! I don't put the code in for the copyright logo, the theme does. Where does the theme grab the URL from?

Posted 6 months ago #
Ismael
Moderator

Hey,

Edit footer.php and find this code

$kriesi_at_backlink = apply_filters("kriesi_backlink", " - <a href='http://www.kriesi.at'>Wordpress Premium Theme by Kriesi</a>");

You can change the URL there. :)

Regards,
Ismael

Posted 6 months ago #