Newbie lost in style info

Snwstrm · 2018-02-08 14:14:27

I would like to widen the text area of my plain vanilla out of the box textpattern site. My guess is that it is using classic theme, default everything.
The problem I am facing apart from knowing very little about the mechanics, is that there are a multitude of different places to change too many similar things.
Where do I edit? Inside the textpattern Presentation page template editor OR in the themes section of the directory OR the css files OR …
Are there sample themes somewhere? Readily available for newbies like myself?

jakob · 2018-02-08 16:15:58

If you’re talking themes and can see options for “themes” in your admin area, then you’re working with the development version of Textpattern that is not yet (but soon) in beta. That also answers your second question: there are not yet many sample themes to work with.

Either way, the width of the main text column is defined in the CSS. In the default setup, that is in the stylesheet called default, which you’ll find in the Presentation » Styles panel.

Look for something like this:

.site-header,
.site-footer,
.container {
    width: 88%;
    max-width: 54em;
    margin: 0 auto;
  }

and change the values for width and max-width to what you want.

jakob · 2018-02-08 16:41:56

As always many roads lead to Rome. The standard setup serves the CSS from the database, and you can see and edit that in the Presentation » Styles panel.

If you prefer to develop your own CSS as a separate assets file – for example, because you’re using another tool or app to create your stylesheets – you can do that too. Just:

Place your own self-made CSS file in your /css/mystyles.css directory.
Change your page template to use your own CSS file instead of the one in the database:
- Go into Presentation » Pages and click on default, then look for the following lines (which also contains the hint of what you need to do) and change as required replacing default.css with your own file name:

<!-- CSS -->
    <txp:css format="link" media="" />
    <!-- ...or you can use (faster) external CSS files e.g. <link rel="stylesheet" href="<txp:site_url />css/default.css"> -->

Now your own CSS file will be used and the editor in the admin panel is no longer relevant. It’s really just a matter of preference and working method.

The forthcoming themes feature simply allows you to bundle collections of templates and styles together in packages. You can edit them in the admin area just like normal. The ‘themes’ area is only needed if you want to import a new theme bundle or save your own pages, forms and styles as a theme bundle for porting to another site.

Snwstrm · 2018-02-12 09:12:10

Thanks!
When I found the right place to change, and actually saw it making a difference, it makes it a whole lot easier. Although in my style section I found this section that I altered:

/* layout
———————————————————————- */

#container { margin: 10px auto; padding: 10px; width: 1000px;
}

Regards,
Staffan

Destry · 2018-02-24 13:11:04

Snwstrm wrote #309197:

When I found the right place to change, and actually saw it making a difference, it makes it a whole lot easier. Although in my style … I altered #container…

Welcome to Textpattern, Staffan.

Just remember that theme developers are aware of building themes responsively (aka, “mobile-first”) which means the styles will be structured in a way to work at different screen sizes and thus devices. Mobile styles at top of files and media queries for larger screen progressively at bottom. So just be sure to test your changes in different devices (a laptop, a tablet, a phone, at least).

Also, a good way to quickly figure out what HTML element or CSS selector is affecting a given aspect of design/layout is to use your browser’s inspector tools.

Have fun!

Textpattern CMS

Textpattern CMS support forum

#1 2018-02-08 14:14:27

Newbie lost in style info

#2 2018-02-08 16:15:58

Re: Newbie lost in style info

#3 2018-02-08 16:41:56

Re: Newbie lost in style info

#4 2018-02-12 09:12:10

Re: Newbie lost in style info

#5 2018-02-24 13:11:04

Re: Newbie lost in style info

Snwstrm wrote #309197:

Board footer