WordPress.org

Forums

Untitled
How to resize Widget Area (26 posts)

  1. yenzb
    Member
    Posted 1 year ago #

    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

  2. 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.

  3. yenzb
    Member
    Posted 1 year ago #

    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

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

  5. yenzb
    Member
    Posted 1 year ago #

    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

  6. yenzb
    Member
    Posted 1 year ago #

    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!!!

  7. 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.

  8. 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?

  9. yenzb
    Member
    Posted 1 year ago #

    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

  10. I'll look at these issues separately.

    Translation

    https://cloudup.com/cXZrcyKH1ZS

    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?filtersstatus=untranslated

  11. 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/

  12. "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?

  13. 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.

  14. yenzb
    Member
    Posted 1 year ago #

    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

  15. 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!

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

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

  17. yenzb
    Member
    Posted 1 year ago #

    AWESOME!!!

    Thank you so much! This worked out great!
    Sorry but all these things developed while tweaking the page and the original topic was how to resize the widget area.
    Is there an elegant way to get a 300px widget area while keeping the rest of the spacing looking as great as it does? I have the child-theme with the custom style.css and functions.php.
    It would be great if all of the content would be extended a little to the left and a little to the right. While I tried to edit some of the style.css the spacing between the recent posts and the widget area got smaller which looked bad.

    Thank you! Thank you! Thank you!
    Jens

  18. Thank you so much! This worked out great!

    Great, glad to hear you got the language files working!

    Is there an elegant way to get a 300px widget area while keeping the rest of the spacing looking as great as it does?

    Making those sorts of changes in a responsive theme is actually a little tricky, especially overriding media queries in a child theme.

    The secondary column (sidebar) is currently set to 25% of the overall page width, which is 1000px. That works out to 250px.

    Two thoughts:

    1) Have you tried placing a 300px Google ad in the sidebar to see if it is automatically shrunk down a little to fit the space?

    2) If #1 doesn't work, try reducing the width of the left column and increasing the width of the sidebar a bit, but perhaps only at larger screen sizes:

    @media screen and (min-width: 1000px) {
    	.content-area {
         	max-width: 600px;
    	}
    
    	.site-main .widget-area {
         	float: right;
         	overflow: hidden;
         	width: 300px;
    	}
    }

    If you go the second route, I'd suggest testing your site at different screen sizes and on different devices to be sure it still looks as you'd expect.

  19. yenzb
    Member
    Posted 1 year ago #

    Hi!

    Thanks again!
    I tried the second way and while it looked good on the main page within one post there was a problem. The text looked scrammed and the width of the pictures wasn't 700px but 600px.

    And since WordPress 3.9 the spacing between the paragraphs within the post and the space between the pictures has increased a lot. How can I change this parameter?

    Thanks!
    Kind regards
    Jens

  20. designsimply
    Member
    Posted 1 year ago #

    The text looked scrammed and the width of the pictures wasn't 700px but 600px.

    Without being able to see this myself since you didn't provide a link, my guess would be that removing and re-inserting the problem image might solve the issue. You could try that as a troubleshooting step.

    while it looked good on the main page within one post there was a problem

    Was the problem only with one specific post on the single post view? Which one? Can you include specifics such as the title of the post with the problem and a link to where I can see the problem happening?

    And since WordPress 3.9 the spacing between the paragraphs within the post and the space between the pictures has increased a lot. How can I change this parameter?

    It would help to know more information about how you are creating content. For example, if you write directly into the WordPress editor without copying and pasting from another source, does the problem go away?

    In 3.9, the way content is pasted from programs like Word changed. There is not a way to change that parameter back, and it's a general WordPress issue unrelated to the theme. I can try to help guide you to a solution that works for you going forward though. To do that, let's look at a specific example. Can you please include a link to a post where the spacing isn't good that we can look at together and maybe also a link to a post from the past where the spacing is what you want?

  21. Brooke972
    Member
    Posted 1 year ago #

    I also am having problems fitting the ads in the sidebar. I don't care the size of the sidebar just as long as the ads fit in their space nicely and aren't cropped or overlapped. Recommendations?

    This is my site: http://www.proyectogtg.com/

    Thanks,
    Brooke

  22. Hi Brooke972 - would you mind please starting a new thread since this one is already very long and quite focussed on helping another person? Folks will be able to help you more easily in your own thread. Thanks!

    I don't care the size of the sidebar just as long as the ads fit in their space nicely and aren't cropped or overlapped.

    It won't really be possible to help unless you tell us the dimensions of the ads you want the sidebar to be able to fit, otherwise it's a guessing game. :-)

  23. Apologies Brooke972 - I see that you already started another thread here: http://wordpress.org/support/topic/adsense-ads-not-fitting-in-the-side-bar

    Let's continue the discussion over there. The reason I'd pointed you to this thread was so that you could try some of my suggestions I gave this user, not so that you could post here as well. I'm very sorry I wasn't clearer. :-)

  24. designsimply
    Member
    Posted 1 year ago #

    @yenzb, if you still need help, please include a link to a post on your site where we can see the spacing problem in action.

  25. May
    Member
    Posted 6 months ago #

    Hello, I have a question and found this may be as better place than any to post it.

    When I hover over my images the color dims and gets a little transparent which I like but it also shows a paperclip icon in the center which doesn't look good. Any advice as to how I may be able to get rid of the paper clip?

  26. sacredpath
    Moderator
    Posted 6 months ago #

    @may, this thread is in the Untitled theme support forum, and you are using a different theme, in the future it would be best to ask either the theme author, or ask in the general Themes and Templates forum here.

    I took a look at your site and you can use the following CSS to hide the link icon when you hover images.

    .overlay .thumb-info i {
        display: none;
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.