How to have exact theme/look of Texpattern website?

ibrahima · 2021-04-16 20:36:08

Hi all
I have been using Textpattern for some time. I just like the way the default website looks, with all the CSS and stuff. I have more complex Wordpress based website but Textpatter suits my very need for my current project.
My question is: how do I get the same exact theme as the Textpattern website? I mean with layout, sidebar, color buttons, title highlighting etc…

Thanks in advance for any help
Ibrahima

Bloke · 2021-04-16 20:43:29

You could start here. Browse that repo for some of the template code used.

ibrahima · 2021-04-18 19:23:12

Thank you very much @Bloke!
I had a look at your page and had a real laugh (lots of humour)…
But I could find a few interesting plugins.
I could not understand how to exploit code on GitHub though. I don’t know what to do.
Is the default theme at texpattern.com not downloadable somewhere?
Cheers
Ibrahima

Bloke · 2021-04-18 20:23:06

Yes you can download the bundle from the default-theme GitHub page.

Click the big green ‘Code’ button near the top and choose Download Zip. Then you can unpack that and browse the assets and templates.

If you want to import it into your textpattern installation:

Create a directory in your /themes with the name you want to give the theme (e.g. dotcom).
Copy the pages, forms, styles and manifest.json dirs/files from the zip into dotcom.
Copy the assets directory from the zip into dotcom.
Visit your Textpattern Presentation>Themes panel.
Use the Import theme dropdown to select dotcom and import it.
Assign its page/styles to any sections you want to apply it.

Hope that helps.

ibrahima · 2021-04-18 20:37:03

Oh that is pretty clear!
Will try that and come back to you.
Thanks a lot again.

ibrahima · 2021-04-19 13:00:02

Hi Bloke,
Thank you for the help. I actually tried that. I downloaded the zip file, then created mytheme folder in /themes folder. Now I copied these from textpattern-com-website/src/templates:
<forms
<pages
<sections
<styles
and assets these from src/assets:

<fonts
<img
<js
<sass

All copied to the folder I created.
Then when I go and activate the theme (assign), all my blog reverts to Texpattern website with only menu and no styling. Also I see a 404 in place of the <body> of the website.
I probably got a lot of things wrong.
Will retry all the steps to see.

Cheers
Ibrahima

Bloke · 2021-04-19 13:11:22

ibrahima wrote #329908:

when I go and activate the theme (assign), all my blog reverts to Texpattern website with only menu and no styling.

Sounds like it’s either:

a) not loading your stylesheet properly – it may be that the paths are hard-coded to use ‘default’ rather than the current theme in use.
b) not finding your assets directory at all (or looking for it in the wrong location).

The browser inspector might help here – especially the console or network panes as they’ll show you which assets are not being found. If there are any hard-coded URLs too that go to https://textpattern.com/_<something>_ then you’ll need to remove those prefixes and use your own (or remove them entirely so the site uses your domain by default).

Bear in mind that – unlike a true packaged theme designed for import and sharing – the textpattern.com site is not a true theme. It’s a website that uses the theming features of Textpattern. So you may need to unpick the design if you’re trying to duplicate parts of it.

Hope some of those tips help.

Last edited by Bloke (2021-04-19 13:14:03)

ibrahima · 2021-04-19 13:18:14

Thank you!!
I actually get this error when importing theme: Themes imported: dev-css.
Invalid form type for: shortcodes/media_video, shortcodes/media_file, shortcodes/media_image. Current valid types are: article, category, comment, file, link, section and misc. misc will be used by default.

Actually I realized it importes content from Texpattern (sections, categories etc… Like this “blog” page:

<!DOCTYPE html>
<html lang="en-GB-oxendict">
<head>
    <txp:output_form form="head" />
    <txp:if_article_list>
        <txp:article pgonly limit="12" />
        <title>Blog / Textpattern CMS</title>
        <meta name="description" content="Latest blogs from Team Textpattern and guests; Textpattern news and other tidbits of info that we find of interest.">
        <txp:variable name="page" value='<txp:page_url type="pg" />' />
        <txp:if_variable name="page" value="1">
            <meta name="robots" content="index, follow">
            <link rel="canonical" href="<txp:site_url />weblog/">
            <meta name="twitter:card" content="summary">
            <meta name="twitter:site" content="@textpattern">
            <meta name="twitter:title" content="Textpattern CMS blog">
            <meta name="twitter:description" content="Latest blogs from Team Textpattern and guests; Textpattern news and other tidbits of info that we find of interest.">
            <meta name="twitter:image:src" content="https://textpattern.com/apple-touch-icon.png">
            <meta name="twitter:url" content="<txp:site_url />weblog/">
            <meta property="og:site_name" content="Textpattern CMS">
            <meta property="og:type" content="website">
            <meta property="og:title" content="Textpattern CMS blog">
            <meta property="og:description" content="Latest blogs from Team Textpattern and guests; Textpattern news and other tidbits of info that we find of interest.">
            <meta property="og:image" content="https://textpattern.com/assets/img/branding/textpattern/textpattern-og.png">
            <meta property="og:image:width" content="1200">
            <meta property="og:image:height" content="1200">
            <meta property="og:image:alt" content="Textpattern logo">
            <meta property="og:url" content="<txp:site_url />weblog/">
            <script type="application/ld+json">
                {
                    "@context": "https://schema.org",
                    "@type": "Blog",
                    "headline": "Textpattern CMS blog",
                    "description": "Latest blogs from Team Textpattern and guests; Textpattern news and other tidbits of info that we find of interest.",
                    "url": "<txp:section url escape="json" />"
                }
            </script>
        <txp:else />
            <meta name="robots" content="noindex, follow">
        </txp:if_variable>
        <txp:evaluate test>
            <link rel="prev" href="<txp:newer />">
        </txp:evaluate>
        <txp:evaluate test>
            <link rel="next" href="<txp:older />">
        </txp:evaluate>
        <txp:variable name="bloglandingpage" value="1" />
    <txp:else />
        <title><txp:title /> / Textpattern CMS</title>
        <txp:meta_description />
        <txp:meta_author title />
        <meta name="robots" content="<txp:if_expires>unavailable_after: <txp:expires gmt format="%d-%b-%y %T" /> GMT<txp:else />index, follow</txp:if_expires>">
        <link rel="canonical" href="<txp:permlink />">
        <meta name="twitter:card" content="summary">
        <meta name="twitter:site" content="@textpattern">
        <meta name="twitter:title" content="<txp:title />">
        <meta name="twitter:description" content="<txp:meta_description format="" />">
        <meta name="twitter:url" content="<txp:permlink />">
        <meta property="og:site_name" content="Textpattern CMS">
        <meta property="og:type" content="article">
        <meta property="og:title" content="<txp:title />">
        <meta property="og:description" content="<txp:meta_description format="" />">
        <meta property="og:url" content="<txp:permlink />">
        <txp:if_article_image>
            <txp:images limit="1">
                <meta name="twitter:image:src" content="<txp:image_url />">
                <meta property="og:image" content="<txp:image_url />">
                <meta property="og:image:width" content="<txp:image_info type="w" />">
                <meta property="og:image:height" content="<txp:image_info type="h" />">
                <meta property="og:image:alt" content="<txp:image_info type="alt" />">
            </txp:images>
        <txp:else />
            <meta name="twitter:image:src" content="https://textpattern.com/apple-touch-icon.png">
            <meta property="og:image" content="https://textpattern.com/assets/img/branding/textpattern/textpattern-og.png">
            <meta property="og:image:width" content="1200">
            <meta property="og:image:height" content="1200">
            <meta property="og:image:alt" content="Textpattern logo">
        </txp:if_article_image>
        <script type="application/ld+json">
            {
                "@context": "https://schema.org",
                "@type": "Blog",
                "blogPost": [{
                    "@type": "BlogPosting",
                    "headline": "<txp:title escape="json" />",
                    "description": "<txp:meta_description format="" escape="json" />",
                    "url": "<txp:permlink escape="json" />",
                    "mainEntityOfPage": "<txp:permlink escape="json" />",
                    "datePublished": "<txp:posted format="iso8601" />",
                    "dateModified": "<txp:modified format="iso8601" />",
                    "author": {
                        "@type": "Person",
                        "name": "<txp:if_custom_field name="external-author"><txp:custom_field name="external-author" escape="json" /><txp:else /><txp:author escape="json" /></txp:if_custom_field>"
                    },
                    "publisher": {
                        "@type": "Organization",
                        "name": "Textpattern CMS",
                        "logo": {
                            "@type": "ImageObject",
                            "url": "https:\/\/textpattern.com\/assets\/img\/branding\/textpattern\/textpattern.png"
                        }
                    },
                    "image": {
                        "@type": "ImageObject",
                        "url": "<txp:if_article_image><txp:images limit="1"><txp:image_url escape="json" /></txp:images><txp:else />https:\/\/textpattern.com\/assets\/img\/branding\/textpattern\/textpattern-og.png</txp:if_article_image>"
                    }
                }]
            }
        </script>
    </txp:if_article_list>
</head>
<body itemscope itemtype="https://schema.org/WebPage">
    <txp:output_form form="body_header" />
    <main id="main" aria-label="Main content" itemscope itemtype="https://schema.org/Blog">
        <div class="container">
            <div class="layout-container">
            <txp:output_form form="body_crumbs" />
                <txp:if_article_list>
                    <div class="layout-4col-3span">
                        <txp:article form="article_listing_blog" limit="12" />
                        <txp:output_form form="pagination" />
                    </div>
                <txp:else />
                    <txp:article form="blog" />
                </txp:if_article_list>
                <txp:output_form form="sidebar" />
            </div>
        </div>
    </main>
    <txp:output_form form="body_footer" />
</body>
</html>

Last edited by ibrahima (2021-04-19 13:18:50)

Bloke · 2021-04-19 13:23:18

ibrahima wrote #329910:

Invalid form type for: shortcodes/media_video, shortcodes/media_file, shortcodes/media_image.

This is a (current) shortcoming of our Form types. They can’t be imported with a theme – you’ll need to enable Advanced Prefs and then add those form types by hand first. Forgot about that, sorry. But it probably doesn’t matter too much because the form type is usually only used for organisational purposes. Not many people use it for outputting content of different mediatypes (yet) but that will become more commonplace – and by then we’ll have implemented a native way of importing types via the theme’s manifest.json file.

Actually I realized it importes content from Texpattern

Yes, that’s what I feared: it uses hard-coded URL paths. There’s nothing you can do about this except find and replace them all (either directly in the database or by hand through the UI).

ibrahima · 2021-04-19 14:17:55

Thank you
I reverted back to my default theme until this is solved. I will be looking into your tips. It looks a little scary because I am not very familiar with the structure of Texpattern.

Thanks

ibrahima · 2021-04-19 14:25:07

Hi
I Deleted imported theme and realized I lost my menu. Articles show directly but no menu and no sitename and no footer.
I must have deleted some other important stuff.
Any thoughts on how I can restore these? Articles, sections seem ok.
Thanks
Ibrahima

Last edited by ibrahima (2021-04-19 14:26:47)

ibrahima · 2021-04-20 11:29:48

Hi

That was solved but I have a weird behaviour on my “change style” radio box: one is labelled “default”, the other radio box has no label, but I can select and apply it.
Any ideas on what I did wrong again?

Thanks
Ibrahima

Last edited by ibrahima (2021-04-20 11:30:01)

Textpattern CMS

Textpattern CMS support forum

#1 2021-04-16 20:36:08