Jump to content


Photo
- - - - -

Several minor customizations. Properly described and illustrated.

Featured post navbar lines social-icons

  • Please log in to reply
3 replies to this topic

#1 victorypug

victorypug

    Newbie

  • Members
  • 2 posts
  • Country: Country Flag

Posted 01 June 2013 - 09:37 AM

Dear PageLines-Community,

 

I recently bought pagelines and have some questions regarding customization. PageLines customer service advised to contact the forum regarding further questions. I tried, googled and searched this forum but I'm now at a point where I do not make any progress without help  :thumbsu:

Url of Blog: www.victorypug.com

 

I also attached a scribble of my current layout (left side) and the desired layout (right side). This is important because I will refer to the numbers on the layout.

 

1. Featured image

I would like to have a featured image (image only, no grey area and no text on the left side of the image as currentyl) of the most recent post with 800px width.

 

2. New lines

I woudl like to insert some lines of 1000px width at the following positions:

- below navBar

- below text of featured post

- Between each row of tiles of further posts (optional)

 

3. Preview of Feature

Below the featured most recent post on top, I'd like to have the title and a short teaser (first lines of post) of the post. 

 

4. Menu items 

The navbar should ideally consist of 4 to 5 selected Blog-Categories, which should be highlighted gray upon hovering with slightly rounded edges.

 

5. Other items

On the upper right side of the blog I would like to place the search-bar, Social icons and the regular menu items.

 

6. Optional text

I was also thinking about having a short text (like "Most recent posts") above each row of tiles. But this is really optional.

 

General specifications:

Total width: 1000px

 

I'm more than happy to make further clarifications if my descriptions are unclear.

 

I know that these are 6 issues but I really don't know how to proceed - your help is very much appreciated!  :)

Kind regards

 

scribble.jpg



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 01 June 2013 - 02:18 PM

Hi,

 

1.  Featured Slider can be set up without any text if you don't add any, and without overlay (there are options in feature slider setup). You can set up the slider to pick up slides from a category (Go to Dashboard > PageLines > Page Options > Site Defaults > Features) -- see the settings and options there.  Make sure your post's featured image is the size you want it to be in the slider.  I do not recommend aspect ratio, and don't think expecting the slider to successfully crop or resize is a good idea.  Some browsers don't work with this (like IE). Just make the static height the size you want it, then crop your image in a graphics editor, and set it in the post.

 

2.  Use the Universal and Full Width Sidebars with text widgets, or the Content Box. I don't think you'll be able to add text between rows of images unless you're using the Grid to create the image boxes.

 

3.  Your features have this built right in, but in No. 1, you wanted this gone.  If you want the title/description for the slide, you can add it via the slide, then using CSS, position the overlay below the image if you've set your images correctly.  You can change the overlay color and transparency, text color, shadow, etc. using CSS.  Feature descriptions pick up the unique excerpt in the post, not the first few lines of the post. For SEO purposes, you really should use the Excerpt field in all your posts.

 

4.  You can have the menu pick up pages automatically, but not categories. You can easily manage adding categories directly from Dashboard > Appearance > Menus. It's only a few seconds work. Highlighting is done on action or hover, but curved corners are a CSS styling process you have to do.

 

5. If, after all the options you required in 1, you have either full-width or universal sidebars available, add them to the Header in Drag & Drop, over the Branding. Go to Dashboard > Appearance > Widgets and add the search field. You can position it to the right using CSS. Social Icons can be added using a hook. The menu will remain below it.

 

6. Do this using the Grid system.

 

Set your width via Dashboard > PageLines > Site Options > Layout Editor.

 

I strongly urge you to read our documentation at

Please Login or Register to see this Hidden Content

 

You will find some great information there.



#3 victorypug

victorypug

    Newbie

  • Members
  • 2 posts
  • Country: Country Flag

Posted 01 June 2013 - 02:48 PM

Hi Rob,

thanks for the swift reply. I do understand to some extent, but some of your comments are not specific enough for me to use.

 

I managed to resize the feature slider to 800px and add a line below the nav.

 

For today I'm exhausted but would be satisfied if I can reposition the 

- post title

- excerpt/preview 

below the feature slider.

 

How would the CSS look like for that one? I identified those areas to be "ftext" and "fheading" but how do I reposition them?

 

I will dig into the material in docs - looks great.

 

Thanks again!



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 01 June 2013 - 03:11 PM

If you have

Please Login or Register to see this Hidden Content

you'll be able to find the element where the title and description and overlay are contained.  You'll have to adjust the margin-top by a number of pixels (I don't know what value) so that it moves below the slide itself.

 

Make sure you use Text on Bottom. That will align your title and description side by side, rather than stacked as it s now.

 

Then, using Firebug, you can find the correct element and modify the margin-top so that it moves below the height of the slide's background.  You'll also need to adjust the height of the slide to more than the height of the backgound.

 

In plain speak, if the image is 300px high, you'll need to set the height of the slide to 400 (to accommodate the positioning of the title and description stacked under the background).







Also tagged with one or more of these keywords: Featured post, navbar, lines, social-icons