Sandbox – starting with CSS

  • Author
    Posts
  • #840326

    stefmorgan
    Member

    So… Just starting and very bemused about how to get what I want. Working in Dreamweaver 3 on a template they provide, which has the five divisions I want. Do I just move that code over to Sandbox, under the very minimal stuff already in the Sandbox CSS Stylesheet editor?… I looked at the whole original Sandbox stylesheet, which can’t be edited. So I move Dreamweaver code in under the visible code in the editor, and it supplants (parts of) the (invisible) coding above it? This is not exactly intuitive.

    I want, first, to make HEADER and FOOTER divisions, both for a fixed width (is 960 conventional? I was thinking 1000), with a background outside it to fill in if the monitor is wide, as in Twenty-ten and other themes. I’ve managed to put in a Header division, but that was just because I came on some code quite by chance– not in DW. Probably there is a better way! Footer needs a menu bar repeating exactly the menu under the header. Both of these should have images– header lets the original text show through, which is very odd & I must change it. How would I type header text on top of the image? I also want to add a footer image under the text (my own contact info, WP info)– again, can I type my own footer text on top of the image? And will the WP info always show through automatically? (I understand it must stay, that’s fine.)

    Next, TWO SIDEBARS, left and right. LEFT side just wide enough for search and category widgets– what’s the minimum?– then an image, to be repeated as far down as the main-body text will go. In the left side are those permanent RSS and Meta feed links, and the Search box also seems to be permanent, but I want to remove all these– put in the search widget and category one above the image, nothing below. I have read here that I can get rid of the RSS and Meta things, which don’t respond like usual widgets, but I can not see where they are in the Sandbox CSS stylesheet. RIGHT sidebar is to be very narrow, also with an image that repeats down to the bottom of the text– just a decorative pattern, no widgets.

    MAIN BODY of the text should reformat when the browser is made wider or narrower. This will flow around embedded images, yes? If I embed them right to start with?

    Did I read somewhere that you don’t allow embedding the Google translation widget? How come?

    Can I put in a player that will play music right from the page, without linking to a separate blank page with a little line player on it? That wastes reading time and spoils the mood…

    Other dinky worries in time, but making the divisions, the five boxes, is the big concern right now. Thanks much for your help!

    The blog I need help with is uvakkavo.org.

    #840538

    timethief
    Member

    You cannot build or use your own custom theme built from scratch at WordPress.com. There is no FTP access and we cannot upload new themes.
    http://en.support.wordpress.com/ftp-access/
    http://en.support.wordpress.com/themes/adding-new-themes/

    The only themes we can use are those found here > Appearance > Themes
    This is a multiuser blogging platform. All blogs wearing the same theme are using the same underlying template on this multi-user blogging platform and we cannot access the underlying files and edit templates or themes. http://en.support.wordpress.com/themes/editing-themes/

    There are two free themes, Sandbox and Toolbox designed to allow maximum flexibility for CSS editing and creating new “skins”. Toolbox is more modern and includes a lot of support for CSS3 and HTML5, so it is really only limited by your skills and knowledge.

    If you have CSS editing experience the upgrade will allow you to stylize the appearance of themes you find here > Appearance > Themes, but will not allow you to change the functionality, by editing the underlying template. It does not allow you to remove footer links to the theme designer or to WordPress.com. Also note that CSS is theme specific, so you cannot use the CSS stylesheets from other themes with the themes at WordPress.COM. http://en.support.wordpress.com/custom-design/custom-css/

    Please read this section > custom design > Frequently Asked Questions
    http://en.support.wordpress.com/custom-design/custom-css/#frequently-asked-questions

    See also > WordPress.com vs. WordPress.org: The Differences > http://support.wordpress.com/com-vs-org/

    Did I read somewhere that you don’t allow embedding the Google translation widget? How come?

    There are resticted codes on this multiuser blog platform for security reasons.
    http://en.support.wordpress.com/code/

    Can I put in a player that will play music right from the page, without linking to a separate blank page with a little line player on it? That wastes reading time and spoils the mood…

    There is no autoplay on the wordpress.com audio player and if you wish to upload audio files from your own computer, you will need to purchase the Space Upgrade. http://en.support.wordpress.com/audio/
    For alternatives see here http://wpbtips.wordpress.com/2009/12/05/alternative-audio-players/

    Please be patient while waiting for Staff to help you with your CSS editing.

    #840596

    stefmorgan
    Member

    Thanks for your quick partial reply. The music players look useful and yes, I have the Space upgrade. As for the translation, no doubt I could add my own text to the left sidebar and link to translate.google.com, as a personal widget? Also, I assume WP admits a donation button (Paypal)? Can that go in the sidebar?

    So far so good, but…

    Patiently wondering if I can add the second, thinner sidebar (on the right), and if I can customize the footer which is evidently there since the WP link is in it: I want to put my own contact info there, as is customary on other sites, and also a second menu there. I could add links to the end of each text, but would much prefer a colored footer with an image.
    Wondering how to make the images in the sidebars repeat themselves vertically as long as the page becomes, right down to the footer.
    Wondering also how to make sure there is a fixed width for the Sandbox theme as customized with CSS, so that text does not stretch out too wide to be readable, as mine does now. Seems to me this and the header and sidebars and footer are exactly what one would want to do with the theme, and many of us who upgrade with CSS must have them in mind; so I am sure there must be a way to make them happen.

    I have been using Dreamweaver only as a source of code that does make things happen as I wish them to. Should none of it work in Sandbox? Why? It looks the same. I tried pasting code to make a new header with an image, and this did work fine, except that the old words show through.

    Just a note: I found that Microsoft LiveWriter, which links to the blog and automatically publishes posts (which then can be copied as pages), is a good source of HTML code. Simply write as in doc or rtf with all the colors and fonts and sizes and right-left-center justification, and it makes the code, and this code works perfectly in WP. Except for blank spaces (tabs)– and I’ve preserved these by underlining every space I want to look empty, and changing the color of the underlinings to match the background. Maybe such workarounds are common knowledge?… But might be new to some.

    Thank you for help, and I look forward to learning more.
    S

    #840619

    timethief
    Member

    As for the translation, no doubt I could add my own text to the left sidebar and link to translate.google.com, as a personal widget?

    No you can’t. It’s JavaScript and the software strips the code out to provide security as this is a multiuser blogging platform. There are two workarounds – no CSS editing required.

    Also, I assume WP admits a donation button (Paypal)? Can that go in the sidebar?

    Yes you can place a PayPal donation button code in a text widget and display it in a sidebar – no CSS editing required.

    customize the footer which is evidently there since the WP link is in it: I want to put my own contact info there .. also a second menu … add links to the end of each text … prefer a colored footer with an image.

    Please note this > the existing footer links cannot be hidden or removed > http://en.support.wordpress.com/custom-design/custom-css/#frequently-asked-questions
    What you want to do can be coded into a text widget and then Staff will help you position it with CSS editing.

    #840640

    stefmorgan
    Member

    Thank you three times, for the translation workround which I see is your own– bravo! and the note on Paypal, and about the footer. Yes, again, I will be fine with leaving the WP link there, just want to put some color and more words in the box.

    It will be great if/when Staff can help with the footer and sidebars and width and header.. then I will be all set and can think only about the content. I think we’re getting there.

    Thanks again,
    Stef

    #840658

    stefmorgan
    Member

    Just one other probably minor question I had, not yet addressed, about permanent widgets in Sandbox:–

    “In the left side are those permanent RSS and Meta feed links, and the Search box also seems to be permanent, but I want to remove all these… I have read here that I can get rid of the RSS and Meta things, which don’t respond like usual widgets, but I can not see where they are in the Sandbox CSS stylesheet.”

    This is the text of those widgets, which have links:
    Search [box]
    RSS Feeds — All posts — All comments
    Meta — Site Admin — Log out

    All this I want to remove. Please advise?
    Thank you,
    Stef

    #840665

    timethief
    Member

    P.S. This is not a CSS solurtion. Did you know that if you don’t want any sidebar content ie. widgets at all, you can place empty text widget in each sidebar/footer area and that will eliminate the default sidebar content?

    #840700

    stefmorgan
    Member

    Ohh!
    News to me!
    I will try this, and again, thanks a lot.
    You have been a great help. I’ll wait on Staff for the rest, then?…

    #840732

    I want, first, to make HEADER and FOOTER divisions, both for a fixed width (is 960 conventional?

    I checked http://uvakkavo.org/ and I found that it is currently using the Chateau theme with several custom CSS modifications already in place. The header and footer at http://uvakkavo.org/ are currently 960px.

    If you have further questions about the header and footer size for the http://uvakkavo.org/ site or if that’s not the site you’re working on, please post back and let us know.

    Regarding the width choice, I think 960px and 1000px are both conventional choices.

    #840733

    header lets the original text show through, which is very odd & I must change it. How would I type header text on top of the image?

    It looks like you resolved this by creating a header image with text included in the image itself.

    Each theme at WordPress.com is unique. If you were to add a site title, to the Chateau theme that is currently setup for http://uvakkavo.org/ then you could use CSS to re-position the site title over the top of the header.

    #840734

    Footer needs a menu bar repeating exactly the menu under the header.

    The Chateau theme has several footer widget areas which you could use to add a menu. There are a few different ways you could choose to do it. One way would be to create a second custom menu on the Appearance → Menus page, add it to one of the footer widget areas, and then use CSS to adjust the spacing if needed.

    #840735

    Can I type my own footer text on top of the image? And will the WP info always show through automatically?

    You could either create the image with the text included, or you could add a text widget and re-position it over the top of the image.

    I think timethief covered the question about WP showing through, but yes we do ask that you keep the credit links for WordPress.com in the footer.

    #840736

    Can I type my own footer text on top of the image? And will the WP info always show through automatically?

    You could either create the image with the text included, or you could add a text widget and re-position it over the top of the image.

    I think timethief covered the question about WP showing through, but yes we do ask that you keep the credit links for WordPress.com in the footer.

    #840737

    Next, TWO SIDEBARS, left and right. LEFT side just wide enough for search and category widgets– what’s the minimum?– then an image, to be repeated as far down as the main-body text will go.

    How many sidebars are available depends on the theme design.

    To see if the theme you are using has different layout options, check the Appearance → Theme Options page.

    You can also search for themes with two sidebars in the theme showcase: http://theme.wordpress.com/themes/columns/two-columns/

    You can add repeating image to a sidebar using the “background” property for CSS. The first step would be to upload the image you’d like to use to your media library. If you need further help, please upload the image first and then provide the image URL as well as the link to the site you’re working on showing the sidebar.

    When you asked “what’s the minimum?” were you referring to the minimum number of widgets? Note that themes usually have a default widget set for each sidebar, so in order to customize any sidebar you would have to add at least one widget.

    #840738

    MAIN BODY of the text should reformat when the browser is made wider or narrower. This will flow around embedded images, yes? If I embed them right to start with?

    What you’ve described sounds like responsive design–where the elements of the theme adjust according to the width of the browser. That is a feature that is built into several of the WordPress.com themes. You can see responsive layout themes listed at http://theme.wordpress.com/themes/widths/responsive-width/

    #840739

    Hopefully I’ve covered most of your questions! But I know you may have more since you may have changed your theme or I may not have been checking the right site address. Please let me know if you have further questions.

    #840740

    stefmorgan
    Member

    Thanks much for the updates re uvakkavo.org. As you saw, I have turned to Chateau and done with it most of what I wanted– decided to omit the sidebars altogether for the sake of a fuller page– and incorporated my menus into each page as text with links. All this is still in flux but I am happy with how it is getting to look and function!
    Now to try the translation and audio player code Timethief pointed me to…

    The only (last?) problem I and my advisor have not yet dealt with is this: each page TITLE still appears in huge Garamond Italic. I’ve removed Garamond from all other content, but this is sticky– I think I tried to override it and couldn’t. Must be a H1 thing? We can probably get that fixed, but, if you have advice, again many thanks!

The topic ‘Sandbox – starting with CSS’ is closed to new replies.