Changing background colours in GK Grid?

Hello!

I have been trying to change the background color of one or more "blocks" in the GK Grid.
(Msocial Theme, Wordpress). I want each 'GK News Sho Pro' widget to have different colours.
How can I change this?

I assumed this should be done by creating a custom 'CSS Class'.
(By adding this in the override.css and enabling override css. in the advanced tab)
This is the code I have tried to add in CSS:

Code: Select all

.box.widget-stijl-rood {
                background: blue;
                }

And we added the 'widget-stijl-rood' in the 'news sho pro widget' (widget rules, widget style, custom css class: widget-style-rood)
But this does not work..
Help, please? Is there another CSS file we should add this in or is there another way around? Thanks!

Hi,

Your method seems to be ok, but probably you are using wrong CSS selectors, could you provide an URL to your website? here or via PM or a screenshot with marked GK Grid blocks you want to change.

Hey Piotr, thanks for your quick reply! I have sent you the URL in a PM. I want to change the background colours of all the blocks to different types of grey.

Try to add this code to css/override.css file:

Code: Select all

#gk-header .gk-grid .gk-grid-element:nth-child(1) {
   background: red;
}

#gk-header .gk-grid .gk-grid-element:nth-child(2) {
   background: blue;
}

#gk-header .gk-grid .gk-grid-element:nth-child(3) {
   background: black;
}

etc. nth-child(1), (2) are assigned to number of gk grid blocks.

Hi Piotr,

I have one other question. We want to change the social media icons to change to YouTube and LinkedIn.
How can we change that icon? (so that it becomes negative when you hover on it).
Is that stored in the CSS as well?

Thanks a lot!!

And (how) can I embed a YouTube video in the Grid Widget?
It worked perfectly with a Vimeo video, using this code in a 'text'-widget:

Code: Select all

<iframe src="//player.vimeo.com/video/66301612?title=0&amp;byline=0&amp;portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

But when I change this to a youtube link, it does not work.
Another option I tried is this code, within a 'text'-widget:

Code: Select all

<a class="gk-video-link thickbox" href="http://www.youtube.com/embed/Tprdk3OHdUg?&autoplay=1;&rel=0;TB_iframe=true&amp;width=500&amp;height=350">Watch the introduction</a>

Then I can see the youtube video, but only after clicking on the link: it is not embedded.

Thank you so much for your help, I really appreciate your work and the great template!

In regards to the social media, you have to change this text widget:

Code: Select all

<a class="gk-icon gk-color-gplus" href="https://plus.google.com/+gavickpro/posts"><i class="icon-google-plus"></i></a>

to

Code: Select all

<a class="gk-icon gk-color-gplus" href="https://plus.google.com/+gavickpro/posts"><i class="icon-linkedin"></i></a>

Check this FontAwesome icons, but I think ther's no youtube icon.
http://demo.gavick.com/wordpress/msocial/typography/

Use this code inside text widget to display video from youtube:

Code: Select all

<div class=gk-video"><iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/k0wTHj1zAOY" allowfullscreen frameborder="0">
</iframe></div>

Great, I got it to work! Many, many thanks for your great responses and all your help

One other question about changing the language: I have made a Dutch language file for MO's and PO's,
and I got those to work. (Shall I send you guys these files, so you can include them in the template package?)

But there are still words in the template that have not changed to Dutch.
For example: 'Leave a reply', 'Comments' and 'Groups'.
Where / How can I change these words? Are they set in the PHP / CSS files?

Thanks a lot!!

Hi,

Of course you can send your tranlations to us, thank you! We'll include it into theme package or create sticky topic with translations.

In regards to these words, like "Leave a reply" I think that these words come from WordPress core, did you change your WordPress language?

Hi Pjiotr!

Thanks for the suggestion, that worked

I downloaded the (dutch) language files from http://nl.wordpress.org/releases/#older
And copied the .mo and .po to /wp-content/languages/ and to the language directory of msocial.
That worked perfectly