help…posted a query 1 minute ago and now closed
-
Hi…I just posted a question not one minute ago (titled “creating (or faking?) a custom page template”). It not only names ‘admin’ as last poster, but it was immediately closed to new replies. I have an honest question and was looking for help. Also, I’m logged in. Am I doing something wrong…?
The blog I need help with is: (visible only to logged in users)
-
The spam filter caught it apparently. Let’s try again. What are you wanting to accomplish.
-
Hello TSP, and thanks for picking this up. Actually, I started out by giving a big thanks to you, timethief, and hallluke. Your support in this forum has been so very valuable these past two weeks when I’ve done a self-guided crash course in CSS. Even though I’ve not yet posted my own question (until now), I’ve greatly benefited from the time you’ve spent helping others. Truly, thanks so much for your time.
Now, onto the question. I believe the answer is no, based on the research I’ve done both in the program and here, but I’m going to ask anyhow: in a wordpress.com blog, is there a way to create an additional page template besides those offered in the theme? I am currently using Blogum by Wpshower which comes with two templates: “Default” and “Full Width, no sidebar template”. I need only one additional page layout for my site. I do have the CSS upgrade and have greatly manipulated many features of the theme, but this one has me stumped.
If the answer is no, I’ll follow up with a more specific question and all the relevant links to my site, etc.
-
Several of the new themes have different theme templates built in, I believe. Only the most recent ones, though.
-
We can’t actually create page templates here. We can code up some stuff directly in the page editor, but that will only style the content in the body of the page itself.
CSS is a styling document only, but give us an idea of what you want to accomplish and we can see how much of it can be done via CSS.
-
Okay, that’s what I suspected. I’ll write out my specific dilemma and see what you guys think.
I’m putting up a bat signal … please stay tuned. -
The site I need help with is that linked to my user name: http://www.secondhandplaces.com
Two weeks ago, CSS and HTML were like Chinese to me. I’m learning.Some quick info on how I want it to work:
There are four pages across the top, including: Home, Work, Resume, and Contact.– Home: this is my blog/posts page with constantly changing information and open to the public. How it is currently formatted (a streamline version of the page layout that came with Blogum theme) is how it will remain. The content looks puzzling right now because it’s a collection of placeholders.
– Work / Resume / Contact: my static pages. A child page from Parent “WORK” is the focus of this question.On the page WORK there will be a menu of rollover buttons to a bunch of children pages which will be my design projects, all of which I want to have the same portfolio-esque layout.
Here is a link to the child page in question: http://secondhandplaces.com/work/milwaukee/
Basically, I want this page to look just like a portfolio page from Wpshower’s Portfolium theme, as seen here: http://wpshower.com/demo/?theme=portfolium . Click on any of the small square boxes and it opens another window that features a thin column of text on the far left, and then a larger box for slideshows.
I have realized that I cannot change aspects of the “post-content” in my CSS (including such things as margins, width, borders, etc.), because that would also change features of my posts on my blog (HOME) section of the site, which are also considered “post-content”. That would be bad. So, I’ve begun to attempt to manipulate the HTML on the WP page editor to create a new content section.
In the HTML I added:
<div class=”portfolio-content” style=”margin-left:0;”>
<p id=”firstp”>I need to figure out a way, similar to the rollover images…blah blah blah…</p>
</div>And then in the CSS editor, I referenced these new items and gave them properties like this:
div.portfolio-content {
width:785px;
height:550px;
margin-right:160px;
padding-top:80px;
border-bottom:none;
}#firstp {
color:#DF0101;
width:145px;
text-align:justify;
font-size:10px;
margin-left:0;
float:left;
border-bottom:none;
}Since I cannot create a new page template (let’s call it “Portfolio”), and I’m trying to manipulate the CSS enough to look like one of Wpshower’s “Portfolium” work pages (with skinny left text column and larger slideshow image box)), my two questions are this:
1. Is there a way I can remove/not display “post-content” on this (and new portfolio page? There are still elements from this code (borders, for example) that show up and I don’t want to see.
2. How can I reformat what you see on this linked page “Milwaukee” (http://secondhandplaces.com/work/milwaukee/) so that it aligns to the far left, with the new 145px text column (shown currently in red) falls below where the title says “Milwaukee” ? I’ve tried everything I so far know of, and nothing works. It won’t budge, and I suspect that because in the HTML, it is still considered a property of “post-content”, which I think I want to break away from.Also, if it helps, only these “Portfolio” pages will use the “Full width” layout option from Blogum’s theme. If there was a way to make this “Full width” the portfolio layout I need, that would suit me fine, as doing so would not affect any other pages.
-
I should also note that in the div.portfolio-content on the CSS, the margin-right is currently 160px. This was me messing around to bump that item left 160px (so as to align with title “Milwaukee”. I tried everything, and this is where I was when I copied it into the forum.
-
Shoot. Here is WPshower’s “Portfolium” theme I am trying to mimic on these “WORK” children pages: http://wpshower.com/demo/?theme=portfolium
Click on any of the squares, and it will open another page with a thin left-hand column of text, and a larger image window for slideshows.
-
In the more recent themes here, if you look at the source for a page, you will find a whole bunch of classes listed in the opening body tag and one of those will be something like “page-id-2.” That means that you can specifically style individual pages by preceeding all the general selectors with that such as below:
.page-id-2 .content { declarations here }For portfolio pages, you can work out the CSS on one page, then save a copy in a plain text file and then just change the ID # for the rest of the portfolio pages and insert that CSS. This could get a little messy, but if a group of pages had all the same styling, you could even do something like this:
.page-id-2 .content, .page-id-3 .content, .page-id-4 .content, .page-id-5 .content { declarations here }The above is a little more complex to work out, but would keep the CSS from growing huge and unwieldy on you.
1. If the “post content” is removed then you have no content for that page that you can insert via the page editor. You cannot place DIVs into the theme files. You can put divs into the page editor, but the theme is going to want to put those divs inside of the div with the class of post content. Any elements in post content you do not want you just find and do a display none.
2. See here: http://flippintestblog.files.wordpress.com/2011/08/2hp.png . Basically I set the width of post-meta (the title of the page) to 100% width and then #post-content I did a float left on. I didn’t record everything I did, so there could be a couple other things I did as well.
-
TSP: Again, thanks so much, and you too, raincoaster, for your serious help around here. That’s the danger of naming names — that you inevitably leave names out.
Before I get to it, I just happened upon a lucky aspect of my Blogum theme — the “Heading Six” <h6> that lets you display part of your content outside the main content with the H6 tag. Even luckier for me, it automatically aligns this 145px column to the left side of the page, exactly where I want it. I’ve updated this in my CS and have added a placeholder image where my slideshow will be placed. The only problem now is that the text dropped below the bottom of the image, and I want to directly at left. I need to fiddle with settings to move it back up. Here is a link to the page: http://secondhandplaces.com/work/milwaukee/
However, I would like to take advantage of page-id-# if available for my theme and I think I get what you’re saying here… but if you don’t mind, let me confirm:
I’m using Blogum theme, which was just recently rolled out, so let’s call it new. When I check out the “View Page Source”, I see a list of body classes that looks like this:<body class=”page page-id-676 page-child parent-pageid-8 page-template page-template-page-fullwidth-php logged-in admin-bar typekit-enabled highlander-enabled highlander-light”>
Is this what you’re writing about? Most of my pages have a variation of what’s listed above as either their page-id or their post-id.
If I do, indeed, have page-id-#, how is this applied to a certain page? The same way as I did above, by including the ID’s in the HTML editor, and then inserting info into CSS editor (to configure all settings of element)?
Also, I understand your response to #2 above … even though the
will work perfectly for this portfolio page, thanks for solving that one.
-
Yes, that was what I was talking about. Each page has a different ID, and posts too.
If the main selector for the element you want to change is this,
.content { declarations here }To specifically target the .content in a certain page, you would preceed the .content with the page id class from the body of that particular page such as this.
page-id-676 .content { declarations here }You have to create and publish the page and then get the ID from the body selector for each page. And like I said, you can stack those for certain types of pages that have identical designs such as this.
.page-id-2 .content, .page-id-3 .content, .page-id-4 .content, .page-id-5 .content { declarations here }The above would affect page id 2, 3, 4, & 5.
-
Thanks tsp; this is very helpful. I’ve done a few tests using page id’s and so far, so good. I’m still trying to reformat a page, but I’m just in the beginning of learning what to do, but I clearly see the potential and I plan to work through this today.
Also, if anyone else out there has been following this thread, or is trying to figure out how to take advantage of page-id-# in the CSS, I came upon this helpful video posted a year ago in the forum. Sometimes, especially if this is all completely new, it helps to see someone else run through it. http://www.pagelines.com/blog/using-css-to-create-a-splash-page/
-
- The topic ‘help…posted a query 1 minute ago and now closed’ is closed to new replies.
WordPress.com Forums 
