zutrinken / attila

Ghost Theme

Attila

A content focused responsive theme for Ghost. See a demo at: attila.peteramende.de

♥️ Support

You can buy me a drink if you enjoy using Attila. Cheers 🍻

📷 Screenshot

⭐️ Features

• Theme options
• Responsive layout
• Light and Dark Mode
• Search support
• Post reading progress
• Code highlight including line numbers
• Comments and Disqus (Theme option)
• Ghost accent color

🌍 Localization

🟩 Up to date 🟧 Missing strings

Code	Flag	Language	Status	Translator
en	🇬🇧	English	🟩
de	🇩🇪	German	🟩
es	🇪🇸	Spanish	🟩	r1p
fr	🇫🇷	French	🟩	robink, alsyia
it	🇮🇹	Italian	🟩	fmaida, undrivendev
no	🇳🇴	Norwegian	🟧	arthurnoerve, oisann, Givemeurcookies
zh	🇨🇳	Chinese	🟩	hao-lee, izumiko, emperorjoker
zh_tw	🇨🇳	Chinese Traditional	🟩	Petingo
id	🇮🇩	Indonesian	🟧	simplyeazy
ro	🇷🇴	Romanian	🟧	cdorin93
ru	🇷🇺	Russian	🟩	schamberg97, atjanov
tr	🇹🇷	Turkish	🟩	cgrgrbz, electricalgorithm
sv	🇸🇪	Swedish	🟩	martenj77, LarssonOliver
cs	🇨🇿	Czech	🟩	lunakv, rdolezel
pt	🇵🇹	Portuguese	🟧	matheusvanzan
vi	🇻🇳	Vietnamese	🟩	JustHmmmm, mastoduy
el	🇬🇷	Greek	🟧	thiodordelis
dk	🇩🇰	Danish	🟩	jmayntzhusen, tmlmt
ar		Arabic	🟧	pop-eax
ca		Catalan	🟧	arthurnoerve
lt	🇱🇹	Lithuanian	🟧	arthurnoerve
nl	🇳🇱	Dutch	🟧	gkdp
pl	🇵🇱	Polish	🟩	filipolszewski, MrBoombastic
eo		Esperanto	🟧	ebanDev
ga		Galego	🟩	r1p
uk	🇺🇦	Ukrainian	🟩	Rakanskiy, krupenik, vadimkin
ja	🇯🇵	Japanese	🟩	emperorjoker
fa		Farsi	🟩	ItsAminZamani
fi	🇫🇮	Finnish	🟩	murtoM
th	🇹🇭	Thai	🟩	GmBeHappy
hu	🇭🇺	Hungarian	🟩	ferivoq
ge	🇬🇪	Georgian	🟩	kiknaio

🔠 Setup custom google fonts

1. Go to fonts.google.com and choose a font.
2. Choose Embed and copy the <link> code.
3. Go to Code injection.
4. Add this to Blog Header:

<link href="https://fonts.googleapis.com/css2?family=Mukta&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet">
<style>
  :root {
    --font-primary: 'Mukta', sans-serif;
    --font-secondary: 'Crimson Text', serif;
  }
</style>

⚙️ Development

Install Grunt:

npm install -g grunt-cli

Install Grunt dependencies:

npm install

Build Grunt project:

grunt build

The compress Grunt task packages the theme files into dist/<theme-name>.zip, which you can then upload to your site.

grunt compress

⚖️ Copyright & License

Copyright (C) 2015-2022 Peter Amende - Released under the MIT License.

attila's Issues

Preview does not work

Hi,

if I want to preview my content, i get this error message

How to modify the font used for Posts?

Hi. Thanks for the theme. It would be really helpful to be able to change the font used for posts. Any ideas on how to do that?

Feature Request: LinkedIn and GitHub icons for Author's Bio

Please add LinkedIn and GitHub icons for the Author's Bio.

https://github.com/zutrinken/attila/tree/master/src/font

Not scalable to mobile

Hi. I was wondering why my markdown syntax is not scaled correctly to mobile version. Is anyone knows how to solve it? Website

Screenshot_2019-07-30-14-13-51-71

Show comments button always disabled

Tested with latest Disqus embedded code

Bookmark card - theme update?

For Ghost > 2.30:
⚠️ Note: Themes will require updates to be compatible with the new bookmark card!

Changelog: https://ghost.org/docs/api/v2/handlebars-themes/editor/#bookmark-card

Syntax highlighting options

I've figured out this theme is using highlight.js for syntax highlighting.

How can we use other languages color scheme, just like their demo page? https://highlightjs.org/static/demo/

Thank you.

New strings need translations

The latest version has new strings that need to get localized:

"Author": "Author",
"Topic": "Topic",
"Share": "Share",
"Search": "Search"

@robink, @fmaida, @arthurnoerve, @hao-lee, @simplyeazy, @cdorin93, @schamberg97, @cgrgrbz – I'd be super happy about a new PR or simply just a comment with the right translation.

Making changes to CSS and SCSS

Dear Attila team,

first of all well done on a slick and minimalist theme, we are using the theme for a new blog project and is working very well for our audience and goals.

I am a bit of a beginner with advanced coding, so I wanted to ask one question, if you have some guidance. I have started to make small changes to the theme by editing the CSS style file. I am now seeing that there are also SCSS files, including a style one. Do I need to make changes there too and standardise with the CSS changes? Or? So far, all changes I have done on the CSS work fine, but I haven't touched the SCSS files.

Thank you in advance for any advice you might be able to provide,

Vito

Disable Dark mode

Can't find a way to configure the theme to stick to a light mode, how can I do it?

Activation error: {{@blog}} should be {{@site}} and {{lang}} should be {{@site.lang}}

Got these errors from the latest master branch with Ghost 2.19.4

I already made a PR here : #59

How to install and create content

hello zutrinken
grunt build After the execution of the command
How to access and write blog

Jquery version is very old

Featured posts

Hi! Is there possibile to view - on the home page - all featured posts before others?
At the moment I noticed than system display only the first featured post. Is too complicated to made this change?

Thanks and sorry again but I'me a beginner in developing :-)

Removing excerpt dots in the theme?

Hi,

is it possible to remove the three dots who are added automatically to every exerpt? Or do I have to fork it and change it in the code and then upload my modified theme?

Theme css does not load in Ghost 6.4

Does this theme support Ghost 6.4?

Inconsolata font used in code blocks, but not imported

Only Cardo and Fira Sans are both imported in _fonts.scss, but the Inconsolata font is also used in styles.scss, and isn't loaded. Honestly think not having Inconsolata and using the default (at least on Windows & Chrome) looks better, but I've added this here just in case.

Missing helper: "authors" Error on Upload

Received the following error when trying to upload the design to my Ghost site.

Its throwing style.css is missing error on install in wordpress

Support Full width Images

Full width Images as in Casper. Something like:

.kg-card-markdown {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kg-card-markdown > * {
    min-width: 100%;
}

img[src$="#full"] {
    max-width: 100vw;
}

Enable instant search

As far as the ghostHunter docs go, onKeyUp needs to be set to true for instant-search (search-as-you-type) to be enabled. However, upon enabling it in src/js/script.js, reloading the theme and restarting Ghost, there seems to be no effect at all?

Is attila using a modified version of ghostHunter? How would I go about achieving the same in attila?

Remove google+ sharing icon

Shouldn't the possibility to share on google+ be removed? After all... it's quite dead :)

Source: wikipedia

LE: Forgot to update the theme. Everything fine now

Using prism.js for code highlighting

Hey Peter,

first let me thank you providing such an amazing theme for free! Now, I'm just getting started with Ghost and I'd like to use prism.css and prism.js files for code blocks and inline code, how would I go about that with the Attila theme?

Thanks!

Templates must contain valid Handlebars error

I get the following error when I try to upload this theme using Ghost's admin panel (Design -> upload theme). I'm using a Namecheap.com Ghost machine.

Favicon

Hi, where do I add my favicon? It's returning a 500 error by default. I'm using the theme with the Journey blog project: https://github.com/kabukky/journey

Thanks for a nice theme 👍

Multiple author per post support

Hello,

Would you consider updating the theme so that it can support multiple authors per post, please? It is very straightforward to do for most cases (you just replace {{author}} by {{authors}} in the "post-meta" in post.hbs and loops.hbs) but I haven't found out to do it for the post-author section at the end of each post. Maybe the theme could add a further section for each author at the end of the post?
Also, when assigning two authors to the same post, the post only appears in the first author's author page.

Thanks!

Ghost 2.0

Hi to all, this theme will be upgraded to use the new features of ghost 2.0?
I'd like to use: collections and and Chronological Content...

(I'm not a developer :-( )

thanks you!

Support Prev/Next Post

Add support for prev & next posts in post detail view.
http://themes.ghost.org/v0.6.0/docs/prev_next_post

code blocks with 'text' tag don't format properly

If I want a block of preformatted text to skip syntax highlighting, this works... almost:

```text
This is a block of text.
Syntax highlighting is
disabled.
```

The "text" tag after the 3 backticks forces the syntax highlighting to stop, but all lines (except the first) shift to the left, overlapping the line numbers. "nohighlight" does the same.

Bug:

Disqus comments are not being showed

I've already replaced the string "no-disqus" with my Disqus shortname, but comments aren't still being showed.

My Disqus accounts is properly configured, it was working with my previous Ghost theme...

Url for test: https://rodrigopires.azurewebsites.net/2015/04/21/introducao-sessions-aspnet-5/

Any idea of whats going on?

Tks!

Members support

Documentation: ghost.org/docs/members/introduction/

Development branch: members

Zip files at maximum compression by default

When using grunt zip the resulting file size is currently 1.5MB. This is larger than the default ghost upload file size limit setting for some deployment setups, including the official docker image.

While it is up to the user to change their default upload size limit, the problem could be avoided if zipping the theme was at full compression.

On a linux machine, I extracted the resulting zip file and rezipped it with

zip -r9 attila-9.zip *

The resulting file sizes

-rw-r--r-- 1 amr amr  822694 Apr 20 09:50 attila-9.zip
-rw-r--r-- 1 amr amr 1464593 Apr 20 09:38 attila.zip

I checked Gruntfile.js and could not see a quick way to change that and submit a MR. Happy to do so if you can point me to the right place. Thank you.

Why are compiled assets in version control?

I am wondering why are the compiled assets committed to source control?

From my own experience, this is generally a bad practice and does not really provide any value.

Thanks

Koenig Editor

Any plans to update this theme to support the new styles in the Koenig Editor, namely full width images? I've tried to make changes to the CSS with no success 😞 .

Best regards,
Pedro

A page for browsing tags

Currently, tags can only be seen through a post. It would be helpful if a separate section / category could be created for displaying tags.

This feature can be marked as optional to maintain the minimal-by-default look of the theme.

Desktop font weights too light?

Hello! It seems that the font weights on desktop are too hard to read. (I'm on macOS) But it seems fine on mobile devices.

Having larger paragraphs

Hello there, first of all, thanks for this theme.

I was wondering if there is a possibility to widen paragraphs even if it means rebuilding the theme on my side.

For reference:

Ghost 3.0 warning

Just testing a migration to Ghost 3.0 and got this warning when activating the theme:

Activation successful with errors
Errors

Highly recommended to fix, functionality could be restricted

    The .kg-bookmark-publisher CSS class is required to appear styled in your theme

    The .kg-bookmark-publisher CSS class is required otherwise the bookmark card publisher name will appear unstyled.Find out more about required theme changes for the Koenig editor here.
    Affected files:
        styles

Pages are missing header image

Hi,
It looks like Pages (as opposed to Posts) are missing the header image.

Short posts and links

Hi,

For short posts I'd like to have them display the entire content (with clickable links) instead of a the first few sentences. Is there an option to do this or should I fork?

Responsiveness Issue

Hi Peter,

Great theme you've got here! Thanks for making it. I'm having an issue with the code blocks and them not being responsive on mobile. They seem to be fine on the iPad sizes, but when its down to mobile resolution, they seem to be cut off.

Here's what I mean:

This is how the Demo page looks on the same resolution:

The demo page doesn't seem to have the issue I'm referring to.

This is how I'm using code blocks, which is pretty straightforward:

Any thoughts on why this is happening? Thanks!

Remove social sharing icons?

Is there a way to remove the social sharing icons from the bottom of blog posts from within the Admin UI?

If not, can someone point me in the direction of where I would remove that functionality from the codebase? Happy to find it myself, but someone pointing me in the right direction would be helpful.

Thanks!

How to add a translation?

Hi, I want to add a Chinese translation to this project.
I add a file zh.json in locales/ directory and test it on my blog, but it doesn't work.

No whitespace separating blockquote from preceding paragraph

The <blockquote> element has margin-bottom but not margin-top, and the p element conversely has margin-top but no margin-bottom, creating an awkward appearance when there's a paragraph followed by a blockquote:

solved

solved. can be delete
sorry about that but i see no way to delete it myself

Linkedin sharing button (and icon)

Hi to all, I'm a beginner in developing... I'm trying to make a little customize on the Attila theme for Ghost: I need a button to share posts on linkedin.
Is it possible to have a tips to how make this possible? Now I've tried, but I don't find the Icon.
thanks

Dark mode

Now, I’m not sure if Ghost even supports this yet, but it’d be nice to have a dark mode version of Attila.

Optimally there should be automatic detection based on media query if user’s desktop environment / browser prefers dark mode.

If this is not viable with current version of Ghost platform, then scrap this...

Toggle for Dark Mode

Would it be possible to add a toggle on the top right side of the page so that the visitor is able to choose between light and dark modes?

This feature should not change the automatic detection that is currently in place.

Grouping articles by dates

• Can it be possible to group articles by dates(archive style grouped by year)

PS: Thanks for putting together this project. I use this theme on my personal blog.