Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
#1 2018-02-08 14:14:27
- Snwstrm
- New Member
- Registered: 2018-02-08
- Posts: 2
Newbie lost in style info
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?
Offline
Re: Newbie lost in style info
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.
TXP Builders – finely-crafted code, design and txp
Offline
Re: Newbie lost in style info
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 replacingdefault.css
with your own file name:
- Go into Presentation » Pages and click on
<!-- 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.
TXP Builders – finely-crafted code, design and txp
Offline
#4 2018-02-12 09:12:10
- Snwstrm
- New Member
- Registered: 2018-02-08
- Posts: 2
Re: Newbie lost in style info
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
Offline
Re: Newbie lost in style info
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!
Offline
Pages: 1