My Condensed Question Thread « Support Forum | Kriesi.at

Support Forum » Choices

My Condensed Question Thread

16 posts from 4 voices

Started 11 months ago by Wyko
Latest reply from Ismael
This topic is not resolved

Tags:

Wyko
Member
In the last two days I posted several questions, about half of which have already been answered. In order to stop my threads from rudely cluttering up the top of the forum, I'm posting them all here.

1: Quicklink positioning
- A: The 'Contact' or 'Feedback' quicklink moves further and further from the left side of the page the more text I put in it. How do I fix that?
  http://imgur.com/a/APJhY
- B: Is it possible to disable the contact quicklink when I'm on the contact page? Seems redundant.
2: Reducing the header height.
I need the height of the header to be smaller than it is now, so that the spacing below the logo is as much as the spacing above it currently is.
http://www.getgeek.org/temp

I've tried:
```
div .logo {
padding: 0px;
clear:none;
}

.main_menu {
top: 55px;
left: 15px;
}
```
which didn't work, and then:
```
#header .container{
min-height:140px;
}

#header .container_wrap{
height: 140px;
}
```
...which resulted in this: http://i.imgur.com/5XVCJ.png

3: Clearing the header's right side

~~I'm still looking into this, but I also want to clear all the icons and search bars from the right side of the header. I think I'll be able to figure this one out from searching the forum though.~~ <-- Got it!

4: Misc question: Slow loading custom.css?
I changed the custom.css file to move my main menu up and beside the logo, and also change its font. I've noticed that on a slow connection, the menu will remain down below the logo with the original font until it finishes loading, at which point it moves to the proper position and format. Any idea why?
Posted 11 months ago #
Wyko
Member
Resolved clearing the header's right side by removing the icons from "Theme Options" and then clearing the search bar by:
```
#searchform {
display: none;
}
```
Posted 11 months ago #

Wyko
Member

5: Changing the color of the menu hover color

For some reason, none of the Theme Options changed the color of the menu font. So I added the following lines to custom.css:

.main_menu ul:first-child > li > a{
	font-size:23px;
	font-family: Century Gothic, sans-serif;
	color:#049dd9 !important;
}

#top .main_menu .menu li:hover ul ul, #top .main_menu .menu li:hover ul ul ul,#top  .main_menu .menu li:hover ul ul ul ul{
	color:#f29d35 !important;

}
#top .main_menu .menu li:hover ul, #top .main_menu .menu li li:hover ul, #top .main_menu .menu li li li:hover ul, #top .main_menu .menu li li li li:hover ul{
	color:#f29d35 !important;
}

The color of the menu changed to the appropriate hue, but stopped responding to mouse hoover at all. Apparently my edit to the hoover color didnt work. How can I fíx that?

Posted 11 months ago #

Ismael
Moderator

Hello,

I think you got the same snippets here.

#top .main_menu .menu li:hover ul ul, #top .main_menu .menu li:hover ul ul ul,#top  .main_menu .menu li:hover ul ul ul ul{
	color:#f29d35 !important;

}

#top .main_menu .menu li:hover ul, #top .main_menu .menu li li:hover ul, #top .main_menu .menu li li li:hover ul, #top .main_menu .menu li li li li:hover ul{
	color:#f29d35 !important;
}

Maybe you could try to remove the hover on the first row and change the color.

Regards,
Ismael

Posted 11 months ago #

Wyko
Member

Removing those lines does not in any way change the hover-over effect of the text. I think that the first line of code there has permanently changed the color of the text so that I can't hover it anymore. Unless someone has another idea, I'll keep playing with it.

In the meantime, I still have other questions in the opening that I would dearly love answers to!

Posted 11 months ago #

Wyko
Member

Figured out the hover text issue. The final code to change the color and font of the main menu:

.main_menu ul:first-child > li > a{
	font-size:20px;
	font-family: Monaco, Consolas, "Lucida Console", monospace;
	color:#049dd9 !important;
}

.main_menu ul:first-child > li > a:hover{
	color:#db8e1b !important;
}

Any support team: Please review the questions in the opening. Thanks!

Posted 11 months ago #

Devin
Moderator

Hi Wyko,

1. Looks like your code in custom.css has the correct fix. I'm not quite sure what the root cause of this is but I'll report it to Kriesi.

2. Appears to be correct now as well.

The css change is exactly as you are describing. The code in your custom.css quite literally has not loaded to change the view of your page and so the browser does not have new directions for displaying the content yet. Once the data IS loaded, the browser makes your adjustments.

If you get everything exactly as you want it, you can either choose to make your custom.css layout changes directly to the theme style.css or use a performance plugin on the site to compress all the css and have it load in quicker.

Regards,

Devin

Posted 11 months ago #
Wyko
Member

Thanks for the reply! As for #2: There seems to be a white bar at the very bottom of my pages now. That's the only thing left! Everything else has been resolved.

Posted 11 months ago #
Devin
Moderator
Hi Wyko,

In your custom.css you have
```
#top #slideshow_big, #main {
top: -38px !important;
}
```
Remove the #main from that.

You can adjust the following to move the header elements around a bit instead:
```
div .logo {
padding: 20px 0 4px 0;
}
```
Note: I change the bottom padding to 4 which seems to do the trick. Alternatively, you can just change the background of the:
```
#wrap_all {
background-color: #ffffff;
}
```
To black so that the space in the footer is just not noticeable

Regards,

Devin.
Posted 11 months ago #

Wyko
Member

Devin,

Excellent suggestion! That has cleared out all the spaces I can see. Great work!

The only unintended side effect is that the slideshow has crawled up a tad, cutting the top of the image slightly and expanding the callout below it a bit. Do you know why?

http://i.imgur.com/q7oxv.png

Here's my entire custom.css:

/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

.main_menu {
    top: -55px;
	left: 220px;
}

.main_menu ul:first-child > li > a{
	font-size:20px;
	font-family: Monaco, Consolas, "Lucida Console", monospace;
	color:#049dd9 !important;
}

.main_menu ul:first-child > li > a:hover{
	color:#db8e1b !important;
}

#searchform {
display: none;
}

.small_header_info {
   	font-size:17px !important;
	font-family: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif !important;
	font-style:normal !important;
	min-width: 300px !important;
	font-weight:bold;
	color:black !important;
}

#menu_container {
   height: 140px !important;
   min-height: 140px !important;
}

div .logo {
	padding: 20px 0 4px 0 !important;

}

#top #slideshow_big {
   top: -38px !important;
}

.one_fourth p,
.post-content > div.entry-content > p {
color: brown;
}

.feedback_button {
   left: -63px !important;
   background-color:#db8e1b !important;
   border-color:#e1e1e1 !important;
}

.page-id-86 .feedback_button{
display: none;
}

.callout .big_button {
    background-color: #db8e1b !important;
	border-color:#ebab4c !important;
}

.callout .big_button:hover {
    background-color: #ebab4c !important;
}

Posted 11 months ago #

Wyko
Member

It has also expanded the breadcrumbs a lot.

Posted 11 months ago #
Dude
Dude
Hi!

You need to adjust the #main css code - eg add following code to css/custom.css and adjust the top value (increase/decrease it if required):
```
#main {
top: -28px !important;
}
```
Regards,
Peter
Posted 11 months ago #
Wyko
Member

Dude,

Devon told me to remove the #Main code. But either way, it doesn't work properly.

With #Main: Everything looks great except for the white bar at the bottom.

Without #Main: The white bar is gone, but the front page slideshow and breadcrumbs everywhere else become elongated.

Posted 11 months ago #

Ismael
Moderator

Hi Wyko,

Kindly remove this code:

#top #slideshow_big, #main {
   top: -38px !important;
}

and add this code:

body {
   margin-top: -38px !important;
}

#header {
   top: 38px !important;
}

Hope this resolves the issue. :)

Regards,
Ismael

Posted 11 months ago #

Wyko
Member

There's still a white bar at the bottom of the mobile version, but that's so much less of a problem I barely even noticed. You did it! Thanks so much Ismael!!

Posted 11 months ago #
Ismael
Moderator

Hi Wyko,

Glad that we could help you. :)

Cheers,
Ismael

Posted 11 months ago #