Support » Theme: Untitled » How to resize Widget Area

  • Hi there,

    thanks again for this great theme.
    At the moment I want to integrate some Google AdSense Content. Unfortunately their rectangual ads are 300px wide or a lot smaller. So I would love to resize the widet are to at least 300px.
    So far I tried modifying the style.css file.
    Changing values here:

    .site-main .widget-area{
    	float: right;
        overflow: hidden;
    	width: 25%;

    only resulted in bad looking ways. Values bigger than 30% made the whole widget area disappear (probably because the content is fixed to 1000px and the widgets to 700px max?!)

    I spent some time figuring it out in the trial and error way. But even if i will continue and find one solution I am afraid that it will look bad on an iPad or some other browser or just with one different setting.

    Can you please tell me the elegant way to get the widgetarea so I can fit a 300px Google AdSense Ad into it? I left all other settings to default of the Untitled theme.
    Thanks
    Kind regards
    Jens

Viewing 15 replies - 1 through 15 (of 25 total)
  • Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Hi Jens, I’m glad you’re liking Untitled.

    Could you please provide a link to your site so I can have a look directly?

    So far I tried modifying the style.css file.

    Don’t edit the theme files directly, otherwise your changes will be overwritten when the theme is updated.

    An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

    Hello!

    Thanks for the reply.
    I already created a child theme.
    So far the style.css is still the same as when I installed “Untitled”.
    Thanks for advice about resizing.

    Kind regards
    Jens

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Could you please provide a link to your site so I can have a look directly?

    Hello again,

    sorry for the late reply.
    The page is: http://www.pixelglobe.de
    I would still like to reconfigure the sidebar to a width of 300px.
    And after experimenting with some Google Translate Plugins now the preview images are really small and I can see this strange paperclip-like symbol. Could you help me with this aswell?

    Thank you so much!!!
    Kind regards
    Jens

    I just encountered that “Comments” and “Edit” are still in English while the rest of the page is in German (e.g. “Letzte Beiträge” instead of “Recent Posts”). I reinstalled the *.mo language files but this won’t change. Is this design-related?

    Thanks again!
    Kind regards
    Jens

    EDIT:
    The tiny images are only an issue using Firefox. In Safari the images have the right size but not the right alignment. Instead of being in one horizontal line with the text there is this paperclip-thing and the image is shown one line too much on the bottom.
    Thanks!!!

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    And after experimenting with some Google Translate Plugins now the preview images are really small and I can see this strange paperclip-like symbol. Could you help me with this aswell?

    You’d need to report those bugs to the plugin developers if they were caused by the plugin. To narrow down which plugin is the culprit a good technique is to deactivate all your plugins, then check your site. If the problem goes away, reactivate them one at a time to find the one causing the issue.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    I just encountered that “Comments” and “Edit” are still in English while the rest of the page is in German (e.g. “Letzte Beiträge” instead of “Recent Posts”). I reinstalled the *.mo language files but this won’t change. Is this design-related?

    I checked the .pot file that comes with the theme and the comment look correct:

    #: content-link.php:54 content.php:67
    msgid "1 Comment"
    msgstr ""
    
    #: content-link.php:54 content.php:67
    msgid "% Comments"
    msgstr ""

    Could you provide a link to the German language file you used so I can test it on my end?

    Hi there.

    Thanks for the reply.

    I deactivated and deleted these plugins but still there is no change.

    I used these language files: wpde.org/files/2012/05/de_DE.zip
    that can be found here: http://wpde.org/download/sprachdateien/

    I have also overwritten the .pot file of the Untitled theme with the latest version.

    Unfortunately there are still these weird paper clips, the pictures too small and some of the buttons and texts in English.
    Thanks for the help
    Jens

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    I’ll look at these issues separately.

    Translation

    Edit Post WP Engine Test Site WordPress

    I used these language files: wpde.org/files/2012/05/de_DE.zip
    that can be found here: http://wpde.org/download/sprachdateien/

    That’s the German translation for WordPress, but not the Untitled theme itself.

    Try downloading the Untitled German translation here, by clicking the Export button at the bottom left:

    http://translate.wordpress.com/projects/wpcom/themes/untitled/de/default

    The translation is 94% complete – you can add any missing strings here, while logged in on a free WordPress.com account:

    http://translate.wordpress.com/projects/wpcom/themes/untitled/de/default?filters%5Bstatus%5D=untranslated

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    I have also overwritten the .pot file of the Untitled theme with the latest version.

    The .pot file won’t do anything on its own.

    This post explains the difference between .pot, .po, and .mo files:

    http://www.solostream.com/blog/tutorials/translate-wordpress-theme/

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    “Paperclip”

    When I look at the class on your excerpts on the homepage, they have the class genericon-link on them. I think that’s what’s displaying the link icon, which looks a bit like a paperclip. What you need to figure out is where that class is coming from.

    I don’t see it here on a test site running Untitled.

    If you temporarily activate the parent theme instead of your child theme, does the icon go away?

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    I have a gut feeling that the issue with the thumbnail size is related to the link/paperclip icon, so I’d like to know what happens when you revert back to the parent theme.

    To rule out plugin interference I’d also like you to confirm that both the link/thumbnail problems persist when you’ve deactivated ALL plugins.

    Thanks for all the advice.
    I deactivated ALL plugins (at first I was not sure whether they would keep their settings) and it turned out that there was a problem with the Jetpack Plugin and my SSL-only admin connection. Now I resolved this and after some minor adjustments the site looks quite good.

    There is still the problem with some of the translations. I completed the translation to 100% and downloaded the *.po file. I read the article you linked about *.mo, *.po and *.pot but can’t really figure out how to use them. So I downloaded the translated .po file, copied and renamed it to *.mo and placed these two files in the /themes/untitles/languages folder naming them de_DE.po and de_DE.mo.

    In the wp-config.php the language is set to de_DE.

    But still the “comments”… remain english.
    I thought this might be connected to the child theme I am using but even if I run the regular Untitled theme these terms stay in English.

    Thanks a lot for further suggestions!
    Kind regards
    Jens

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Now I resolved this and after some minor adjustments the site looks quite good.

    Glad you sorted out at least part of the issues.

    But still the “comments”… remain english.

    I just tested this and I think you’re almost there. 🙂

    Here’s the part I’d like you to re-try:

    So I downloaded the translated .po file, copied and renamed it to *.mo

    What you need to do instead is download both the .po and .mo files from GlotPress. (You can choose each format from the dropdown menu next to the Export link.)

    Rename the .po file de_DE.po

    Rename the .mo file de_DE.mo

    Place both files in this directory:

    /untitled/languages

    You should now see the German theme strings showing up on your site.

    But wait… there’s more! Since you have a child theme, it would be better to put the language files there, so they won’t be overwritten next time Untitled has an update, right? Here’s how we do that:

    Instead of placing the .po and .mo here:

    /untitled/languages

    …create a new languages folder in your child theme, and place your .po and .mo there instead. So your two files will be here:

    http://www.pixelglobe.de/wp-content/themes/untitled-child/languages/de_DE.mo

    http://www.pixelglobe.de/wp-content/themes/untitled-child/languages/de_DE.po

    We’re almost there. We need to let our child theme know that these language files are there, by calling in the folder from our child theme’s functions.php file.

    If you don’t already have a functions.php in your child theme, create one in a text editor (not a rich-text editor like Word) and add this bit of code right at the top: <?php

    Next, add this to your child theme’s functions.php file – either the new one you just created (below the opening PHP tag) within an existing functions.php in your child theme:

    add_action( 'after_setup_theme', 'my_child_theme_setup' );
    function my_child_theme_setup() {
        load_child_theme_textdomain( 'untitled', get_stylesheet_directory() . '/languages' );
    }

    That should do it. Please let me know how it goes!

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Adding Codex reference for the function in case anyone is interested:

    http://codex.wordpress.org/Function_Reference/load_child_theme_textdomain

Viewing 15 replies - 1 through 15 (of 25 total)
  • The topic ‘How to resize Widget Area’ is closed to new replies.