scrolling backgroundimage and half-transparent Content-area?

Hi Gavick Pro Team,
I am using yout template World News in my Beta-Homepage: www.dlm-liga.de
But i have the following questions/problems:

1. How can i make the backgroundimage scrolling with? so that the backgroundimage moves down while scrolling down.
Or that the whole content and modules move up and the background stays fix
=> Like this: http://www.world-racing-league.com/
Aim: I want to use a smaler backgroundimage which does cover the whole background-area behind the content and modules.

2. How can I configure, that the content-area -where the article-blog is shown- uses a half-transparent background, so that the main-backgroundimage is seen throught it?
=> Like this: http://www.world-racing-league.com/

3. I also have a problem with every table i include into an artikel or module:
a) Althought I disabled boarders they are always shown.
b) Furthermore the cells have lighting-mouse-over-effects which i never configured and which i cannot disable
=> Due to this problems i cannot build a good locking foot-navigation, and i cannot build an invisible table on a picture.
You can see that on my testing-site: http://test1.bm-media-solutions.de/index.php/

PLEASE help me, thanks a lot

Please edit: wp-content/themes/homedlmtemplategktwn2/css/override.css

Code: Select all

html, body {background-attachment: fixed;}


This will stick your background.

Remember to enable "Use the override.css file" in theme settings (item in admin menu, under comments section, advanced tab).

To make a background semi transparent you would need to add this css:

Code: Select all

#gkContentMainbody {background: rgba(255,255,255,0.5);}


It works only for one element - use firebug or webdeveloper tools to find all elements that have white background and add them after coma like this:

Code: Select all

#gkContentMainbody, #gkPage .box, #gkPage .box_menu, #gkPage .box_text {background: rgba(255,255,255,0.5);}


To remove the hover effect, add this line to override.css:

Code: Select all

table tr:hover {
background: none;
}


wow, thank you very much. It works perfectly. Great!
thanks, thanks, thanks

Could you also help me with this problem:
https://www.gavick.com/forums/general-d ... 33867.html

Ok .

Thank you very much for helping me so far.
But now, I have a different new problem with every table I include into an artikel or module:
1- I create a table with a few rows and a few columns.
2- Than I combine two vertical cells.
3- Now i put a picture into the combined cell.
==> Problem the whole first row takes the high of the picture, and the second row beginns below the picture ==> as if the combined cell is not accepted.

Another problem I am fighting with:
-I want to create a menu into a modulbox with an spezial design.
-Therefore I painted two buttom-sets for mouseon and mouseout
==> But the html code i found simply does not reach an effect. As you con see an the right side of http://www.dlm-liga.de/index.php/formel1 under the calendar.

THIS is the HTML Code I used:


<a href=http://dlm-liga.de/index.php/formel1><img src="images/FORMEL1/Startseite/Modul-Boxen/SchnellZugriffsBox/1-Startseite.png" alt="" onmouseover=
"src=images/FORMEL1/Startseite/Modul-Boxen/SchnellZugriffsBox/1-Startseite-MO.png" onmouseout="src=images/FORMEL1/Startseite/Modul-Boxen/SchnellZugriffsBox/1-Startseite.png" /></a>

Basically we provide support for our templates, not straight html/css coding.
With first problem - I would need to see it, but from what I understood - it is how tables behave.
The second post and problem - I would suggest using css backgrounds and :hover pseudoclass to change them.

The problem with the table, you can see in the "Jetzt auch als App erhältlich" Box at bottom of this page: http://dlm-liga.de/index.php/formel1
-The words "Jetzt auch als App erhältlich" I put in the first row,
-The App-Pictures I put in the second row
-The Smartphone Picture I put in a combined cell
-The QR-Code I put in a combined cell, too
==> Althoght these cells are combined, the whole first row takes the hight of both rows, the second row is pushed deeper.

Still can't find that place - could you post a screenshot and mark the problematic element?

yes, of course. I have added the screen to this post.
The big black arrows marks the box. The little yellow lines show the border of the table which is unvisible in frontend.
The yellow arrows show the problem i discribed:

-The words "Jetzt auch als App erhältlich" I put in the first row,
-The App-Pictures I put in the second row
-The Smartphone Picture I put in a combined cell
-The QR-Code I put in a combined cell, too
==> Althoght these cells are combined, the whole first row takes the hight of both rows, the second row is pushed deeper.

First of all - using tinyMCE for creating tables will lead you to a problems... See your source code:

Code: Select all

<table style="height: 149px;" width="664">
<tbody>
<tr>
<td>
<p><img src="/images/FORMEL1/Startseite/Modul-Boxen/QR-CodeBox/smartphones.png" alt="" style="opacity: 1; visibility: visible;"></p>
</td>
<td>
<p style="text-align: center;"><span style="text-decoration: underline;"><em><strong><span style="font-size: 18pt; font-family: trebuchet ms,geneva;"><img style="float: left; opacity: 1; visibility: visible;" src="/images/FORMEL1/Startseite/Modul-Boxen/QR-CodeBox/jetztauchalsapperhaeltlich.png" alt="" width="416" height="41"></span></strong></em></span></p>
<p style="text-align: center;">&nbsp;</p>
<p><a href="https://itunes.apple.com/de/app/deutsche-liga-meisterschaft/id808759381?mt=8" target="_blank"><img src="/images/FORMEL1/Startseite/Modul-Boxen/QR-CodeBox/apple.png" alt="" style="opacity: 1; visibility: visible;"></a><a href="https://play.google.com/store/apps/details?id=com.Tobit.android.Slitte6438815367" target="_blank"><img src="/images/FORMEL1/Startseite/Modul-Boxen/QR-CodeBox/googleplay.png" alt="" style="opacity: 1; visibility: visible;"></a><img src="/images/FORMEL1/Startseite/Modul-Boxen/QR-CodeBox/blackberry.png" alt="" style="opacity: 1; visibility: visible;"><a href="http://www.windowsphone.com/en-us/store/app/deutsche-liga-meisterschaft/c48a841c-83a7-45e5-b8fd-c08acbfae090" target="_blank"><img src="/images/FORMEL1/Startseite/Modul-Boxen/QR-CodeBox/windowsphone.png" alt="" style="opacity: 1; visibility: visible;"></a></p>
</td>
<td style="text-align: center;"><img src="/images/FORMEL1/Startseite/Modul-Boxen/QR-CodeBox/qrcode_Formel1DLM-RacingEU.png" alt="" width="96" height="96" style="opacity: 1; visibility: visible;"></td>
</tr>
</tbody>
</table>


For sure it might be done with only:

Code: Select all

<table style="height: 149px;" width="664">
<tbody>
<tr>
<td>
<img src="/images/FORMEL1/Startseite/Modul-Boxen/QR-CodeBox/smartphones.png" alt="" style="opacity: 1; visibility: visible;">
</td>
<td>
<img style="float: left; opacity: 1; visibility: visible;" src="/images/FORMEL1/Startseite/Modul-Boxen/QR-CodeBox/jetztauchalsapperhaeltlich.png" alt="" width="416" height="41">
<p><a href="https://itunes.apple.com/de/app/deutsche-liga-meisterschaft/id808759381?mt=8" target="_blank"><img src="/images/FORMEL1/Startseite/Modul-Boxen/QR-CodeBox/apple.png" alt="" style="opacity: 1; visibility: visible;"></a><a href="https://play.google.com/store/apps/details?id=com.Tobit.android.Slitte6438815367" target="_blank"><img src="/images/FORMEL1/Startseite/Modul-Boxen/QR-CodeBox/googleplay.png" alt="" style="opacity: 1; visibility: visible;"></a><img src="/images/FORMEL1/Startseite/Modul-Boxen/QR-CodeBox/blackberry.png" alt="" style="opacity: 1; visibility: visible;"><a href="http://www.windowsphone.com/en-us/store/app/deutsche-liga-meisterschaft/c48a841c-83a7-45e5-b8fd-c08acbfae090" target="_blank"><img src="/images/FORMEL1/Startseite/Modul-Boxen/QR-CodeBox/windowsphone.png" alt="" style="opacity: 1; visibility: visible;"></a></p>
</td>
<td style="text-align: center;"><img src="/images/FORMEL1/Startseite/Modul-Boxen/QR-CodeBox/qrcode_Formel1DLM-RacingEU.png" alt="" width="96" height="96" style="opacity: 1; visibility: visible;"></td>
</tr>
</tbody>
</table>


It is much simpler to read.

Add a class to your table:

Code: Select all

<table style="height: 149px;" width="664" class="middle-centered">


Then you can edit: /templates/gk_twn2/css/override.css and add at its end:

Code: Select all

table.middle-centered td {vertical-align: middle;}


Remember to enable "CSS override" in template settings - advanced section.

wow, thank you very much. It worked. Super!
The mouseover-problem I solved by using another editor. So every thing seems to be fine now with this 2 problems

Last / final problem to reach my luck:
-How can I creat new "module class suffixes"?

I am dreaming of different combinations of "color" and "dark" in relation to its header and its body.
These 6 classes I would like to creat, each in non-transparent und semi-transparent.
Where can I put the css file for a new class?

Use override.css to make any changes or additions for css'ing. This way if you ever decide to update the template, the only file you will need to backup is override.css.

could you please write an example how to implement such a extra suffix?

Code: Select all

/* -dark */
#gkPage .box.dark,#gkPage .box_text.dark {
   background: rgba(37, 37, 37, 0.75);
   color: #b1b1b1;
}
#gkPage .box.dark h3,#gkPage .box_text.dark h3,#gkPage .box.dark h3 a,#gkPage .box_text.dark h3 a {
   color: #fff;
}
#gkPage .box.dark > div,#gkPage .box_text.dark > div {
   margin: 0;
}
#gkPage .box.dark div.content,#gkPage .box_text.dark div.content,#gkPage .box.dark div.custom,#gkPage .box_text.dark div.custom {
   margin: 12px;
}
#gkPage .dark.custom {
   margin: 0px !important;
}
#gkPage .box.dark > div > h3.header,#gkPage .box_text.dark > div > h3.header {
   background: #333;
   border-bottom: 1px solid #3e3e3e;
   margin: 0;
   width: 100%;
   float: none;
   border-top: none;
   height: auto;
}
#gkPage .box.dark > div > h3.header > span,#gkPage .box_text.dark > div > h3.header > span {
   text-transform: uppercase;
   line-height: 38px;
   min-height: 38px;
   margin: 1px;
   color: #fff;
   text-indent: 12px;
   display: block;
   -webkit-border-radius: 2px 2px 0 0;
   -moz-border-radius: 2px 2px 0 0;
   border-radius: 2px 2px 0 0;
   background: #444;
   float: none;
   text-shadow: 0 1px 0 #222;
}
#gkPage .box.dark > div > h3.header > span a,#gkPage .box_text.dark > div > h3.header > span a {
   color:#fff;
}
#gkPage .box.dark a,#gkPage .box_text.dark a {
   color: #fff;
}
#gkPage .box.dark a:hover,#gkPage .box_text.dark a:hover {
   color: #cb260a;
}
#gkPage .box.dark li,#gkPage .box_text.dark li {
   background: transparent url('../images/separator_white.png') no-repeat left 10px;
   line-height: 24px;
   padding-left: 13px;
}


This is a complete declaration for dark suffix,

Code: Select all

/* -color */
#gkPage .box.color,#gkPage .box_text.color {
   background: rgba(252, 48, 48, 0.75);
   color: #F6F3F3;
}
#gkPage .box.color > div,#gkPage .box_text.color > div {
   margin: 0;
}
#gkPage .box.color div.content,#gkPage .box_text.color div.content#gkPage .box_text.color div.custom {
   margin: 12px;
}
#gkPage .box.color div.custom {
   margin:0;
}
#gkPage .box.color > div > h3.header,#gkPage .box_text.color > div > h3.header {
   background: #c6250a url('../images/style1/color_header_bg.png') repeat-x left top;
   border-bottom: 1px solid #ee4d30;
   margin: 0;
   width: 100%;
   float: none;
   border-top: none;
   height: auto;
   -webkit-border-radius: 2px 2px 0 0;
   -moz-border-radius: 2px 2px 0 0;
   border-radius: 2px 2px 0 0;
}
#gkPage .box.color > div > h3.header > span,#gkPage .box_text.color > div > h3.header > span {
   text-transform: uppercase;
   line-height: 38px;
   min-height: 38px;
   margin: 0;
   padding: 1px;
   color: #fff;
   text-indent: 12px;
   display: block;
   -webkit-border-radius: 2px 2px 0 0;
   -moz-border-radius: 2px 2px 0 0;
   border-radius: 2px 2px 0 0;
   background: #c6250a url('../images/style1/color_header_bg.png') repeat-x left top;
   float: none;
   text-shadow: 0 1px 0 #bd2309;
}
#gkPage .box.color a,#gkPage .box_text.color a,#gkPage .box.color > div > h3.header > span a,#gkPage .box_text.color > div > h3.header > span a {
   color: #fff;
}
#gkPage .box.color a:hover,#gkPage .box_text.color a:hover {
   color: #f9b2a6;
}
#gkPage .box.color li,#gkPage .box_text.color li {
   background: transparent url('../images/separator_white.png') no-repeat left 10px;
   line-height: 24px;
   padding-left: 13px;
}
.dark p.readmore a,.dark a.readon,.color p.readmore a,.color a.readon {
   color: #fff !important;
}


this one is for color.

So what you need to do is to create your own declarations replacing .dark or .color with your suffix name and defining custom color scheme.

I hope this is the right place to post this question:)
Does anyone know how to place external link on the background image of the site
Thanks a lot:)

Please create new forum thread as your question doesn't corespond to original topic.