Centered Layout jumps for Scrollbar [CSS solution]

Leave a reply

The following scenario might sound quite familiar to the one or the other web designer / web developer: you have a nicely centered layout, but of course some pages have less content than others. For example the contact page can be quite short, if it only features a contact form and some contact details.

So – basically everything is in shape, the layout behaves well – web design by the pixel – only one or two pages don’t have a scrollbar, all the others do. Basically this would not be that dramatic – most browsers will not bother about the little difference and instead display all pages equal. But some browsers don’t. Instead the centered layout is positioned a few pixels to the right, if the scrollbar is missing – or the other way round: the layout ‘jumps’ a fex pixels to the left, if the current page has a scrollbar.

There is a simple scc-trick to solve this problem of ‘jumping’ centered layouts. You just have to force the browser to provide the space for a scrollbar – whether there is a scrollbar or not. Here is the corresponding css-code:

html {
    overflow-y: scroll;
}

Just put the above css snippet in your stylesheet and you’re basically safe. However the above code is actually not really valid css, but who cares anyways. It does solve the problem – and it’s compatible with most modern browsers. According to css-tricks.com only older versions of Opera are not cooperating.

WordPress: jacking up the sub-menu and styling it

Leave a reply

You probably very well know the sub-menu that is “flying-out” from the main navigation on hover.  Many free WordPress Themes are equipped with that rollover-sub-menu and while it may be a nice thing to have, sometimes you want to style it in peace and quiet. And that can be difficult, since it is usually hidden and only shown on rollover (hover) – so working on the sub-menu can be a bit demanding, to say he least.

The right-mouse-button-trick can be handy, to at least check which part of the Style Sheet is doing what: right-clicking on one of the sub-menu’s elements makes the sub-menu stay – and you have virtually all the time in the world to explore the different style instructions put upon it. But after the next reload the sub-menu will be hidden again – and you’ll start all over again: hover, right-click, explore…

So sometimes you may want to really disable the hover, or whatever / who-ever is triggering the sub-menu to show and hide, so you can work on the design details without the actual rollover-effect in action. I was basically looking for a way to have the sub-menu jacked up like a car so I could crawl underneath it and really check out all the css style and design details. This could really speed the development progress up a bit – I hoped.

I just spent some time (actually too much time!) checking out where the actual css ‘command’ is situated, that makes the sub-menu disappear – and re-appear on rollover. First I looked for something like display: none or visibility: hidden but that didn’t lead anywhere. Finally I found it – and maybe this little piece of information is also valuable for somebody else – so I’ll better share it right here / right now, so that also other WordPress–Developers may jack up the sub-menu and crawl under it.

The style sheet of the WordPress-Theme Twenty Twelve has an area for screens wider than  > 600px – there are some style ‘commands’ referring to the unordered second level list that makes the sub-menu:

.main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }

This above style information shrinks the sub-menu-container (ul) to 1×1 pixel – and the overflow: hidden; hides everything, that would otherwise be visible outside that 1×1-pixel-container.

A few lines further down this style instruction is then abolished and the sub-menu becomes visible:

    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }

By simply commenting-out the first style information about height, width and overfow, the default state will be the ‘hover state’ so you can see the sub-menu all the time, without hovering the main menu:

.main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
       /* height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px); */
    }

So… Now you know how to jack up the sub-menu, crawl under it and do some styling in peace and quiet.

rMBP HDMI to TV: Crazy Color Problem [solved]

MacBook Pro HDMI TV crazy colors

MacBook Pro connected to TV via HDMI shows 'crazy colors' - Photo/Screenshot: T.Bortels/cpu20

3 Replies

For a couple of years we had an iMac connected to our SONY Bravia TV via a HDMI cable, so we could watch DVDs and YouTube videos on the TV. Now we finally wanted to first time connect the rather new MacBook Pro to the TV – and were confronted with some nice looking problem: the colors went crazy.

Connecting the Retina 15″ MacBook Pro to the SONY Bravia via HDMI cable was easy. The rMBP has it’s own HDMI port – so all the adapters I was used to use with the iMac suddenly weren’t needed anymore: plug’n’play HDMI fun. So the video signal found it’s way to the TV – but on the TV screen everything appeared in ‘crazy colors’. It looked as if the black and white tones were replaced by magenta / pink / purple and baby blue. Wow! How psychedelic! As if the TV now had a built in solarization filter

The internet seems to be full with suggestions what could help to solve this problem: from changing cables to color calibrating. But nothing of that helped to solve the problem. For us the solution was rather simple: the retina resolution of the MacBook Pro seems to be the ‘problem’ – providing a ‘wrong’ resolution to the TV set.

To solve this problem we did the following:

  • open the system preferences and go to
    > display
  • Then simply switch the resolution from 1360 x 768 to 1080i
  • optional: splitting the displays (uncheck “mirror displays”)

After that the crazyness was over and the colors shown on the TV set were behaving normal.

Manage display of WordPress Widgets (e.g. not on front page)

Leave a reply

With the so called Widgets a lot of information can be displayed in the sidebar of a WordPress website. Sometimes this can be a little bit too much information and you want to cut the number of widgets displayed. Two plugins can come in handy.

The problem is actually not a problem at all: a default install of WordPress offers a lot of widgets, that can be implemented easily and display a lot of information automatically:

  • latest blog entires
  • latest comments
  • a Tag-Cloud with popular keywords / tags
  • search
  • links to social media profiles
  • links to neighboring websites (Blogroll)
  • Shop-Categories
  • most popular posts
  • etc.

Sooner or later the sidebar might get jammed, overstuffed with widgets, the user doesn’t recognize any of the precious widgets and the User Experience goes down the drain.

This doesn’t have to mean that you should turn off any of the widgets you installed over the time. Instead you should focus – and see what widgets make sense on what page.

Widget-organization meets information Architecture

So sooner or later you should have a look at you collection of widgets and make a plan ,which widget you would want to present in which context / on which page / on which content  type. What is the most useful additional piece of information you want to present on that particular page? You’ll need to define a logic behind the display of widgets.

manage wordpress widget display by pathGood news is: there is a rather simple solution to handle such logic: the plugin Widget Logic is light weight and rather easy to handle – maybe a bit too easy to handle. With a few lines of PHP you can define almost every condition you like. And this can be a security risk since everybody with access to the widget administration can inject virtually any type of malicious code.

Here come another plugin  handy: the plugin Widget Logic by Path reduces the power of Widget Logic to paths – and in most cases this will probably be exactlty what you would want.

For example: entering the short code <all paths except> will make the widget not show on the pages / paths listed below that short code. Adding <home> will make the widget not show on the front page.

Here’s the links to the above mentioned plugins with additional information:

10 steps to boost your Blog-Income by factor x-1000

Leave a reply

It was last weekend that I found it was too hot to work – but still I wanted to do something at least work related. So I wrote this article, that I always wanted to write, on how to boost your blog-income… a thousandfold… theoretically.

First things first: this article is half ironic – but I have no doubts you may still find a lot of useful information, on how to improve your blog-income: attract additional readers, generate additional page views, raise the click-rate and raise the money that you get per click. And there are also some other probably useful truths in the following text that might be useful for someone how is cosidering to earn money online by blogging.

So maybe you’re running a website and/or a blog? Or you have thought about starting a blog to generate an additional passive income stream? Or you just want to ‘earn money online? I have to admit I do – but most of my income I make ‘online’ does not come from ads or affiliate programs. But that’s a different story.

I you want to earn some money ‘online’ there are a number of options. Monetizing a blog by putting up ads and affiliate programs is one of them. Maybe it’s not the most lucrative method, but chances are that with a decent amount of visitors and the right niche you can actually earn some money writing blog articles.

monthly income = monthly clicks x reward per click

So to increase you monthly blog-income, you would basically ‘just’ have to increase the number of monthly visitors and/or raise the reward you’re paid per click.

How can I raise my blog-income by a thousandfold?

The answer to that question lies in the power of the number 2! We simply try to doubling the income with each of the following ten steps and as a consequence the income stream should  increase by the factor thousand. Or actually by the factor 1024 to be exact. Unrealistic? Maybe. But as I mentioned before: there are some truths on the way that may help you anyways.

For this example we will assume you have a blog already, you have a devent amout of content and you make already 1 Euro a day (or 1 dollar if that’s your currency). Let’s go…

1. Search engine optimization (SEO) = more visitors

Try to double the number of visitors by optimizing your website to be ‘more attractive’ to search engines. Today this basically means: make your content mire attractive to humans – and the search bots will be pleased. Check your content: improve your texts, add valuable information, add images, add infographics. Structure your articles. Add sub-headlines. Add descriptive alt-tags and captions to images.

Chances are, you can double the number of visitors by optimizing and improving the  content you already have. Doubling the number of visitors means doubling the number of clicks – and theoretically we just doubled the blog-income to 2 Euro per day.

2. Higher reward per click by optimized context

Some keywords pay better off than others. Do some basic research on the value of your context. Find neighboring topics or related keywords that can attract higher paying ads. The CPC in google adsense / google adwords tells you, how much money you’re paid on average per click (“cost per click”).

By working on the context we can theoretically double the average CPC of your blog. And doubling the CPC means doubling the monthly blog-income – so we have theoretically just doubled the blog-income to 4 Euros per day.

3. More visitors by writing in an additional language

Do you speak a second language? Brilliant! You can theoretically double the number visitors by ‘simply’ providing your content in a second language – so we have just theoretically just doubled the blog-income to 8 Euros per day by translating existing content into a second language.

4. Double your blog-income by writing a second blog

This is a tricky one: close to your main subject there may be a second field, that has similar readers. You can try to start a second blog about another subject you feel comfortable writing about. See if you can attract the same amount of readers and/or income there – and you can  theoretically  doubled your blog-income to 16 Euros per day.

5. More visitors through incoming links

I won’t call this link building, but basically it is link building. But in the recent weeks / months there has been a lot discussions about the usefulness vs. uselessness of link building. True: it can probably harm your search engine ranking, if you overdo it. But ‘truthful’ link building will never hurt anybody.

So do some research in your field and mention neighboring websites and/or blogs that you like. And don’t hesitate to inform the webmasters of those websites that you are linking to them. Chances are, they will link back.

Another approach to win some incoming links is to write valuable content that people really like. Chances are, that some people will put up links to your website, just because they want to recommend it to their readers. Also in times of ‘link buildings discussions’ this is still comon practice. And incoming links do bring additional visitors – either indirectly through an improved search engine position, or directly – through a click on that link.

‘Link building’ has the potential to double the number of visitors – so we theoretically just doubled the blog-income to 32 Euros per day.

6. Optimize the CTR by optimizing your headines

This is also a classic: in most cases the headline of your article is the first thing somebody sees in the Search Engine Result Pages – and how it is perceived can have a great impact on the decision, if the user clicks on it – or not. So writing good headlines can improve the rate of click-throughs – the click-throuh-rate CTR. And headlines are of course also rated by search engines themselves. So there you have already two good reasons to work on your headlines.

Improve your headlines – and chances are you can double the number of visitors – – so we theoretically just doubled the blog-income to 64 Euros per day.

7. Increase the range of your blog through social media and/or newsletters

Offer ways to subscribe to your content so you can turn one-time visitors into returning visitors. Returning visitors are good visitors for various reasons: they are likely to engage with your blog and/or even spread your content among their own audience by sharing it, writing about it, linking to it.

Add a social media profile for different social media platforms: twitter, facebook, instagram, google+. Use any of the many available newsletter tools – and make sure you have a link to a rss-feed.

Making use of rss, social media and newsletters can double the number of visitors– so we theoretically just doubled the blog-income to 128 Euros per day.

8. optimize the position of ads and affiliate programs

Above the fold? Below the fold? Is there a fold? Try for your self. Try different layouts, play around with different positions for your ads and/or affiliate links. Often the right sidebar is overrated by bloggers: it’s just too easy to place an add there – but does it pay? Technically the sidebar is often loaded last – so the add visitors see first may be the last one loaded – which can mean it’s not the most valuable add.

Optimizing the positioning of ads can double the click rate and/or the pay-per-click – so we theoretically just doubled the blog-income to 256 Euros per day.

9. Double the number of articles

Step number nine may be the most difficult to achieve, but at the same the easiest: you double the number of readers by doubling the pace of writing. So instead of writing two articles per week, you write four.

blog-income increaseBut here you should already have become sceptical about the list of ‘improvements’. If you really wanted to follow all above tips and tricks to double your blog-income, you would now have to write double the amount of articles of two different blogs, in two different languages each – and make sure they are double as valuable / double the length. So if you first only spent 2 hours per week writing, you will now find yourself writing 2x2x2x2x2 = 32 hours per week!

However – theoretically it should be possible to double the number of readers – or at least double the number of page impressions by doubling the number of articles written – so we theoretically just doubled the blog-income to 512 Euros per day.

10. … Can you make real money blogging?

We are actually not done with the ten point list – but I guess you got the idea by now and I will leave the tenth point to you.

Yes, there are ways to make real money online – while blogging may be one of them, just writing articles and putting up some ads may not work. There is more making a living than just that. Maybe you can come up with your own idea how earn a decent amount of money by ‘simply’ blogging – and maybe you even manage to double your blog income every now and then? Please feel free to let me know – I’m quite curious…

related reads:

WordPress as a CMS: Custom Content Types and Templates

WordPress CMS: Custom Content / Types

WordPress CMS: Custom Content / Types - Photo / Illustration: T.Bortels/cpu20.com

2 Replies

WordPress is not only a great tool to easily install and run a blog- or news-website, but can also be altered to serve as a Content Management System: WordPress as a CMS. But what makes WordPress a CMS? To me the most important feature is probably that I can expand WordPress’ functionality with additional custom content types.

However – first thing that annoys me a bit is that in WordPress ‘Content Types’ are called ‘Post Types’. This suggests that everything in WordPress generally would follow a ‘Post-Mataphor‘ – which I would find great. But then again a look in the left sidebar of the admin section tells me that WordPress originally distinguished between ‘Pages’ and ‘Posts’. So a ‘Page’ is a Post Type – but a ‘Post’ is also a Post Type. Oh well.

What makes WordPress a Content Management System?

The ability to establish and theme (style) different custom content types (or ‘post types’ in WordPress jargon) is probably the most crucial key feature that makes a CMS what it is: a Content Management System. If you want to manage content (and not just ‘post blog entries’ and ‘pages’) you will sooner or later need to draw lines between the actual content types you’re dealing with. On the website of a record label, an Artist is a different content type than a Release or a Song or a Concert or – an ‘Info-Page’.

Wordpress CMS: Custom Content Type

WordPress as a CMS: Custom Content Type ‘Info-Pages’ in WordPress (overview)

Different content types are often basically different data types – or different sets of data. To bring meaning to these data types they need to be handled differently. And this is only possible, if the CMS can actually handle different content types. Along might also come the demand to use different template files to give the different types of information each a different representation: different style, different layout, different template file.

Describing the custom content type in a function

The following code has to be added to the theme’s functions.php file:

function my_custom_content_type() {
$labels = array(
 'name'               => 'Custom-Info-Pages',
 'singular_name'      => 'Custom-Info-Page',
 'menu_name'          => 'Info-Pages',
 'name_admin_bar'     => 'Info-Page'
);

$args = array(
 'labels'              => $labels,
 'public'              => true,
 'exclude_from_search' => false,
 'publicly_queryable'  => true,
 'show_ui'             => true,
 'show_in_nav_menus'   => true,
 'show_in_menu'        => true,
 'show_in_admin_bar'   => true,
 'menu_position'       => 5,
 'menu_icon'           => 'dashicons-admin-appearance',
 'capability_type'     => 'post',
 'hierarchical'        => false,
 'supports'            => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' ),
 'has_archive'         => false,
 'rewrite'             => array( 'slug' => 'custom-info' ),
 'query_var'           => true
 );

register_post_type( 'custom_content_type', $args );#
 // flush_rewrite_rules();
 }

add_action( 'init', 'my_custom_content_type', 0 );

Custom Post Type Templates in WordPress

Basically all that needs to be done is to define a new Page Type either in the theme’s functions.php file, or through a custom plugin, as described above. There are probably zillions pf plug-ins that will introduce new content types – and many ‘pro themes’ bring along their own usage-specific Page Types like ‘Artist’ or ‘Concert’. But in the end I suspect you will actually want to define your own Post Types according to your or your customers’ requirements. I will describe both ways more detailed in upcoming posts – this article is just a brief introduction into the subject. The actual content type definition is however always the same: first add a function, that describes your new custom content type – then initialize the function.

Then in a second step you can add a new template file to your theme folder that will take care of the representation of your new content type. You can just copy the template file “single.php” and save it with the name of your content type added to the file name like this: “single_custom_content_type.php”.

You can basically do everything inside this file. I would however recommend you also alter template file “content.php” so that it suits your needs.  This will however only get loaded, if you add or actually alter one line of code inside the template file which tells the template, what content to load.

So inside of “single_custom_content_type.php” instead of this:

<?php get_template_part( 'content', get_post_format() ); ?>

you should have the code altered like this:

<?php get_template_part( 'content', 'custom_content_type' ); ?>

…suggesting you have the template file “content-custom_content_type.php” already in place.

Advantages of Custom Content Types

Even without custom fields, custom styles or custom whatsoever you have already quite some advantages instantly at hand:

  • The pager respects the new content type – visitors to your website can now browse from page to page (previous / next) inside that content type. This can be already quite handy in so many situations when you simply want to separate different types of pages from each other
  • The sidebar in the admin section now has some new functionalities that let you easily add and/or edit pages of that new content type. And there is also an overview with integrated search for that content type only.
  • Pages of the new Content Type can have they own ‘slug’ as defined in the function under “rewrite”. This gives the pages of that content type automatically a meaning to both users and search engines. Additionally this can make things easier when looking at web-statistics generated by tools like PiWik or the like.
  • And last but not least: you can add fields and doing so build the content type that suits your data structure, your content,  your needs.

Changing Content Types for existing Pages

Often the situation is like this: you have a WordPress installation, you have some posts, you have some pages – lots of pages. You are basically happy with what you have – you ‘just’ want to add a new content type – and change the content type of some pages that already exist to that new content type. Good news is: the is a Plugin for that! The Plugin Post Type Switcher (wordpress.org/plugins/post-type-switcher/) simply lets you switch post types on a single post (page) basis. Since recent there is also a bulk switcher option so you can ‘move’ several pages from one post type to another without editing each page separately.