@willemb2 wrote:
On smaller iPhones with Dutch as language the buttons at the bottom of the message composer are overlapping:
Screenshot taken on an iPhone 5c with iOS 11.2.6. That’s an old model, but still widely used and I’m getting reports that is no different on more recent models.
Yes, our language has longer words for “saved” and “Upload”. But on a 4.6" Android 7 it looks like this:
Another minor detail: inconsistent capitalization.
Posts: 2
Participants: 2
@willemb2 wrote:
Newby here. We’re evaluating Discourse as possible successor to our SMF forum. Performance of the iOS/Android app is crucial, because members of our club are currently fleeing into ad hoc Facebook and WhatsApp groups.
I installed the Discourse app on an iPhone wit iOS 11 and an Android 7 phone. I’ve seen how you can upload an existing image or take a photo to include in a post. That works great. But I know many people work the other way around: They are in there camera- or Photo’s app, decide that they want to post a picture and tap on
(iOS) or
(Android). This opens a list of apps available to share the picture. Not only the OS-native apps like Mail and iCloud, but also other installed apps like Signal and Outlook. But I’m not seeing Discourse app
Did I miss a setting? Or should I turn this question into a feature request?
Posts: 4
Participants: 3
@davedogs wrote:
Hi, we use Bugsnag (bugsnag.com) on our sites and I wanted to add it to our discourse forum. Is the appropriate way to do this with a plugin or is there a better approach?
Thank you!
Posts: 1
Participants: 1
@ChrisBeach wrote:
I recently saw a complaint about my forum on Facebook.
Apparently someone had tried to sign up and was told “please enter a valid email address” (although her address was a standard hotmail address).
After some digging, I discovered that they’d previously registered with the forum via a social login. Confusingly, Discourse shows the error “please enter a valid email address” in this situation.
It’s a stroke of luck that the user complained. I’m worried that others have had the same experienced, but not complained, and simply given up on the forum instead.
Please could the message be changed to something more helpful, like “there is already an account with this email address - please try signing in instead”
Posts: 5
Participants: 3
@davedogs wrote:
Hi,
I’m interested in setting up our Discourse instance to use AWS’s RDS (Amazon Relational Database Service (RDS) – AWS).
There are two primary reasons:
- our applications all use RDS, so we are familiar and like RDS (backups, etc.)
- we want to use and feature our BZ discourse content on our main application, so it seems easier to establish a db connection with an RDS instance than a db that lives in Digital Ocean.
I know we can configure Discourse to save daily backups. I also saw there is a Discourse API, but it looks a little limited for our purposes.
Thoughts?
Posts: 3
Participants: 2
@tmdo wrote:
Hi all,
I have problem with highlight.js can’t be loaded. I tried to install Discourse for “localhost” domain from the first time and it seems it saved resources with that domain hardcode somewhere. After that I changed the domain to “abc.example.com” try to rebuild the application on console. But hightlight.js still references to the “localhost” or the js file can’t be moved to new folder which contains “abc.example.com” in the folder path.
How could I force update domain or where is the folder which saved that resource so that I can copy and paste manually.
Thanks in advanced,
Tuan Do
Posts: 1
Participants: 1
@quimgil wrote:
In a setup where a WordPress site is connected to Discourse, is it possible to filter out the images from the first post content in the topics created? Would publishing just the excerpts filter images even if they are embedded at the top of the blog posts?
The use case: we are planning to connect our Discourse with an independent online newspaper. They produce a lot of news, usually with images. Their images are not critical for the discussion in Discourse, and we are likely to post excerpts only in order to encourage full article reading in their site. We want to avoid risks of licensing problems and also save storage space.
Posts: 1
Participants: 1
@leo.proctor wrote:
This problem is solved. Since I can’t delete this topic, I’m putting this comment. thanks
I had this in my app.yml file
DISCOURSE_HOSTNAME: 'forum.abc.com’
DISCOURSE_SMTP_ADDRESS: mail.abc.com # required
DISCOURSE_SMTP_PORT: 587 # (optional, default 587)
DISCOURSE_SMTP_USER_NAME: user1@abc.com
DISCOURSE_SMTP_PASSWORD: password
DISCOURSE_SMTP_ENABLE_START_TLS: true # (optional, default true)
DISCOURSE_ENABLE_CORS: true
DISCOURSE_CORS_ORIGIN: '*'
DISCOURSE_SMTP_AUTHENTICATION: loginI want to change the smtp user name, so now it looks like
DISCOURSE_HOSTNAME: 'forum.abc.com’
DISCOURSE_SMTP_ADDRESS: mail.abc.com # required
DISCOURSE_SMTP_PORT: 587 # (optional, default 587)
DISCOURSE_SMTP_USER_NAME: user2@abc.com
DISCOURSE_SMTP_PASSWORD: password
DISCOURSE_SMTP_ENABLE_START_TLS: true # (optional, default true)
DISCOURSE_ENABLE_CORS: true
DISCOURSE_CORS_ORIGIN: '*'
DISCOURSE_SMTP_AUTHENTICATION: loginI rebuilt the container by running ./launcher rebuild app. But it won’t send emails.
I also updatedSiteSetting.notification_email = 'user2@abc.com'from admin panel.The error that shows up in admin logs is:
[Sender] 550 5.7.60 SMTP; Client does not have permissions to send as this sender
I’m stuck on this for long time. Am I missing any settings?
Posts: 2
Participants: 2
@Ivan_Rapekas wrote:
Hi, I checked latest both stable
1.9.3+2andtest-passedand realized that custom badge cannot be granted to user if the reason field is not empty.Steps to reproduce:
- create a new simple badge using font-awasome icon, without SQL
- go to admin/users, find desirable user
- click
Edit badges- select the badge created
- type a reason (important!)
https://www.cuba-platform.com/discuss/t/redirecting-http-to-https/3977/4- click
Grant- you’ll get an error, see details below in the picture.
If the reason field is empty, there is no error.
My forum is in a subfolder, probably that’s a reason of the fail:
Posts: 1
Participants: 1
@Seferi wrote:
Hi,
I migrated my forum to a local device behind a Raspberry Pi Nginx reverse proxy. Installed discourse and registered and went straight to Admin section to restore from my backup. (/var/discourse/shared/standalone/backups/default) I restored successfully but afterwards I couldn’t login anymore. I tried rebuilding the app but it didn’t help. Site works fine now but it doesn’t let me login, When i try to login it says unknown error in red, when i click forgot password and enter my username i get the email to choose new password but when i enter the new password and click ok it says "Sorry, that password change link is too old. Select the Log In button and use ‘I forgot my password’ to get a new link."
What can I do?
Posts: 4
Participants: 2
@vinothkannans wrote:
About
The Discourse SAML plugin allows users to authenticate using SAML method.
Installation
Repo is at: https://github.com/discourse/discourse-saml
In your
app.ymladd:hooks: after_code: - exec: cd: $home/plugins cmd: - mkdir -p plugins - git clone https://github.com/discourse/docker_manager.git - git clone https://github.com/discourse/discourse-saml.gitAnd then rebuild the container:
./launcher rebuild appConfiguration
For Docker based installations:
Add the following settings to your
app.ymlfile in the Environment Settings section:## Saml plugin settings DISCOURSE_SAML_TARGET_URL: https://idpvendor.com/saml/login/ DISCOURSE_SAML_CERT_FINGERPRINT: "43:BB:DA:FF..." #DISCOURSE_SAML_REQUEST_METHOD: post #DISCOURSE_SAML_FULL_SCREEN_LOGIN: true DISCOURSE_SAML_CERT: "-----BEGIN CERTIFICATE----- ... -----END CERTIFICATE-----"The
DISCOURSE_FULL_SCREEN_LOGINoption allows the SSO login page to be presented within the main browser window, rather than a popup. If SAML is your only authentication method this can look neater, as when the user clicks the Log In button the login page will follow through within the main browser window rather than opening a pop-up. This setting is commented out by default - if you want full screen login uncomment that line and set the value to true (as per the example above).For non docker:
Add the following settings to your
discourse.conffile:
saml_target_urlSupported settings
DISCOURSE_SAML_SP_CERTIFICATE: SAML Service Provider CertificateDISCOURSE_SAML_SP_PRIVATE_KEY: SAML Service Provider Private KeyDISCOURSE_SAML_AUTHN_REQUESTS_SIGNED: defaults to falseDISCOURSE_SAML_WANT_ASSERTIONS_SIGNED: defaults to falseDISCOURSE_SAML_NAME_IDENTIFIER_FORMAT: defaults to “urn:oasis:names:tc:SAML:2.0:protocol”DISCOURSE_SAML_REQUEST_ATTRIBUTES: Requests custom attributes from IdP and stores in user custom fields.DISCOURSE_SAML_ATTRIBUTE_STATEMENTS: Used to map Attribute Names in a SAMLResponse to entries in the info hash.DISCOURSE_SAML_DEFAULT_EMAILS_VALID: defaults to trueDISCOURSE_SAML_VALIDATE_EMAIL_FIELDS: defaults to blank. This setting accepts pipe separated group names that are supplied inmemberOfattribute in SAML payload. If the group name specified in the value matches that frommemberOfattribute than theemail_validis set totrue, otherwise it defaults tofalse. This setting overridesDISCOURSE_SAML_DEFAULT_EMAILS_VALID.Custom Request Attributes
DISCOURSE_SAML_REQUEST_ATTRIBUTES- SAML plugin can request IdP for more attributes via SP metadata. The responded custom attributes are will be stored in the user custom fields. For example if you requestcompany_nameandmobile_numberfields then the IdP response will be stored insaml_company_nameandsaml_mobile_numbercustom fields automatically.It can be displayed in the UI by customizing the theme with the help of public and staff user custom fields site settings like below.
Posts: 2
Participants: 2
@Juraj_Matejcic wrote:
We’re getting a 500 internal server error when trying to create a user via the API, here’s what I get from production.log:
Started POST "/users" for 127.0.0.1 at 2018-03-06 13:28:04 +0000 Processing by UsersController#create as */* Parameters: {"email"=>"removed", "api_key"=>"[FILTERED]", "api_username"=>"removed", "username"=>"removed", "name"=>"removed", "password"=>"[FILTERED]"} Rendering text template Rendered text template (0.0ms) Completed 500 Internal Server Error in 42ms (Views: 1.7ms | ActiveRecord: 9.6ms)I’m just using curl on the machine itself, so via:
curl -k -v -X POST -F 'email=removed' -F 'api_key=removed' -F 'api_username=removed' -F 'username=removed' -F 'name=removed' -F 'password=removed' https://foo.bar/usersWorth noting that getting the list of users via the API works just fine. Same api_key and api_username.
New user registration is enabled, and invite only is enabled.
We’re using the LDAP plugin, but I can’t see what that’d have to do with the API.
Our version’s at
v2.0.0.beta3 +292, which might also be a problem, since this stopped working after an upgrade.Doing a rebuild app doesn’t fix the issue.
If needed, I can provide the verbose curl out as well, but the only important bit there is:
< HTTP/1.1 100 Continue < HTTP/1.1 500 Internal Server Error < Server: nginx < Date: Tue, 06 Mar 2018 13:52:25 GMT < Content-Type: text/plain; charset=utf-8 < Transfer-Encoding: chunked < Connection: keep-alive < X-Frame-Options: SAMEORIGIN < X-XSS-Protection: 1; mode=block < X-Content-Type-Options: nosniff < X-Discourse-Username: removed < X-Discourse-Route: users/create < Cache-Control: no-store, must-revalidate, no-cache, private < X-Request-Id: d8dfb524-26b7-4a76-a4a8-96f70cb9e244 < Set-Cookie: __profilin=p%3Dt%2Ca%3D5b595ba25bbff59a6b51f6d39f6ace45%7C0b364c7fb766ced5be17866e10020175; path=/ < X-Runtime: 0.027306 * HTTP error before end of send, stop sendingWe’ve also got some older backups, so restoring to a previous version can be done. We’ve not gone live with this yet, so we can break it (further) to some extent.
Cheers,
Juraj
Posts: 4
Participants: 2
@Philip_Colmer wrote:
We’re using an in-house SSO provider which authenticates against LDAP. We’ve extended the core functionality so that, when the user authenticates, the provider retrieves a list of groups from Discourse and then populates the add_groups and remove_groups based on that list of groups combined with group membership in LDAP.
In order for that to work with multiple Discourse sites, the SSO provider needs to know the URL of the Discourse site that is requesting the authentication.
I did have this working by retrieving the HTTP_REFERER value but the referer field is no longer being populated for some reason. As a result, I’m now have to run two SSO providers running identical code.
I don’t think that Discourse provides the site URL when calling the SSO provider, and I can’t think of another way for the SSO provider to get the site URL if referer isn’t being populated.
Would it be possible to extend the Discourse SSO specification so that the site URL is provided to the SSO provider?
Posts: 1
Participants: 1
@8BIT wrote:
i use tags religiously so any changes in UI / UX (this might go better there…?) is something i notice.
I used to be able to create tags effortlessly and very, very quickly, and I was able to tab through the process very quickly. now, it seems that this is broken and i have to resort to arrow keys back and forth and even using my mouse.
something happened where adding / creating tags to a post takes more time and more clicking.
what i used to be able to do:
- add title to post
- tab, tab (to get to tag box)
- type tag1 > tab > type tag2 > tab > repeat…
- tab out of tag box and start writing content.
it was really fast and natural as i worked my way down the fields.
Posts: 2
Participants: 2
@Dax wrote:
It happened to me on two different trydiscourse.com sites
When I try to add a theme component, the component title does not appear but there is the closing X and if I move the mouse on the (invisible) component title it gives me a fake URL (#).
If I refresh the page the component is not added
![]()
That’s the error:
TypeError: Cannot read property 'id' of undefined at Object.r [as get] (_ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:33144) at _admin-efeafc3f6e7aa857d5c3ae7f8f7578e4a4ed13afef03bf0060135313dd82b6a0.js:2358 at Array.map (<anonymous>) at s.child_theme_ids (_admin-efeafc3f6e7aa857d5c3ae7f8f7578e4a4ed13afef03bf0060135313dd82b6a0.js:2357) at s.<anonymous> (_application-31c2ceeebb45f9189cc5b00c48ba46f1513a8ee6b0521ef708a3c0f45e526aca.js:83) at l.f.get (_ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:28425) at Object.r (_ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:33153) at n (_ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:29376) at s.getProperties (_ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:45894) at saveChanges (_admin-efeafc3f6e7aa857d5c3ae7f8f7578e4a4ed13afef03bf0060135313dd82b6a0.js:2407) u @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:28913cc @sam
Posts: 2
Participants: 2
@cookywook wrote:
(Sorry if this is somewhere in the settings I haven’t looked yet.)
Can you set up automatic messages to go to users when they rank up in the Community? eg. a “Congratulations, you’re now a Regular!”
It seems to only work for Badges.
Posts: 3
Participants: 2
@David_fs wrote:
The only thing I can see in the access logs is:
217.138.11.237 - - [06/Mar/2018:15:09:04 +0000] "POST /message-bus/c2a0f3d9a16a490eb6be56bc668d6c81/poll?dlp=t HTTP/1.1" 301 185 "http://marketdiscuss.com/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36"this is a standard Digital Ocean setup droplet setup.
Config details match the instructions, I can see the .key and .cert files just fine in
shared/ssl/*{key, cert}Ran
discourse-setupand says everything ran successfully, rebuilds and the docker container is live.
I just can’t seem to hit the server by loading the page in my browser. Had this working perfectly, with people signing up and everything. But wanted the ssl for better seo I guess.Any help would be awesome: Chrome seems to acknowledge the the cert is valid:
I am able to enter the container just fine and view logs live etc… everything seems like it’s OK, but it’s in reality
Posts: 3
Participants: 2
@outofthebox wrote:
Hi everyone, is there a way to exclude admin activity from the Discourse statistics reports? I want to understand how much activity is going on independent of my actions in the community. In advance, thank you!
Posts: 2
Participants: 2
@Dax wrote:
A good banner:
- should not be invasive. Scrolling the page over and over again to get to site content is never a good thing.
- must be clear and explicit, displaying only the essential information. The fewer lines there are to read, the easier it is for even a distracted user to read them! No one likes walls of text.
- uses colors that recall your brand.
- gives a clear call-to-action. Add only strictly necessary links and make the most important one a button to click.
Also consider these points:
- a picture is worth a thousand words. You can also use a gif, as long as it is not psychedelic!
- do you really need a visible banner even on mobile devices? Often the banners on smartphones are boring, they load with difficulty if they have very heavy images (reduce the weight as much as possible!) and the page must be scrolled over and over again to make it disappear. Consider adding a close button or not putting the banner on mobile devices at all!
If you are not technical follow the Automatic Installation instructions
A three-column Discourse banner
A three column banner that will be responsive and therefore can also be enabled on mobile devices.
Automatic installation: GitHub - discourse/discourse-three-columns-banner
- Follow this guide How do I install a Theme or Theme Component?.
- After installing the banner, you have to add it as a component of the main theme (or the main themes if you have more than one selectable by users)
Manual Installation:
Add the following code in the Common > After Header tab
<!--SECTION BANNER BOX--> <section class="banner-box"> <!--ADD A "CLOSE BANNER" BUTTON ON THE TOP RIGHT--> <!--To disable this button, comment the <button> </button> tag--> <button class="close" data-dismiss="alert"> <i class="fa fa-times d-icon d-icon-times" title="Close."></i> </button> <div class="container"> <!--SECTION HEADER--> <div class="section-header "> <!--TITLE--> <h2 class="x-title"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> <div class="colored-line"></div> <div class="description"><p> Nulla ullamcorper augue vel sodales pellentesque. Sed vitae sapien sit amet mauris consequat malesuada. Vestibulum vitae iaculis nisl, vel aliquet velit. Fusce venenatis laoreet diam, non dictum nisl vestibulum non.</p> </div> <div class="colored-line"></div> </div> <!--/END SECTION HEADER--> <div class="row"> <!--SINGLE BOX--> <div class="col3 single-box"> <!--ICON--> <div class="x-icon"><i class="fa fa-cloud"></i></div> <!--HEADING--> <h3>A simple box</h3> <!--BOX DESCRIPTION--> <p class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id congue eros, sit amet suscipit libero. Nunc vitae placerat est. </p> <!--LIST--> <div> <ul class="feature-list"> <li><i class="fa fa-coffee"></i><a href="your-url"> Coffee and milk</a> to wake up in the morning</li> <li><i class="fa fa-heartbeat"></i> One hour of gym</li> <li><i class="fa fa-book"></i> Rearrange books in the study</li> <li><i class="fa fa-telegram"></i> Telegram</a></li> <li><i class="fa fa-subway"></i> Go to work</a> avoiding traffic</li> </ul> </div> </div> <!--/END SINGLE BOX--> <!--SINGLE BOX--> <div class="col3 single-box"> <!--ICON--> <div class="x-icon"><i class="fa fa-rocket"></i></div> <!--HEADING--> <h3>Another simple box</h3> <!--BOX DESCRIPTION--> <p class="box">Integer velit ante, <a href="www.discourse.org">DISCOURSE</a> amet tristique in, gravida at ligula. Sed gravida mauris id neque vestibulum semper. Suspendisse potenti. Nam nec maximus ligula. Ut eget semper est. Sed ornare sit amet justo eu rutrum. Integer sit amet facilisis ipsum. </p> <!--BUTTON--> <div class="buttons" id="my-button"> <a href="enter-a-url" class="btn btn-icon-text ember-view"><i class="fa fa-user-plus d-icon d-icon-user-plus"></i>My new button</a> </div> </div> <!--/END SINGLE BOX--> <!--SINGLE BOX--> <div class="col3 single-box"> <!--ICON--> <div class="x-icon"><i class="fa fa-cog"></i></div> <!--HEADING--> <h3>Yet another simple box</h3> <!--BOX DESCRIPTION--> <p class="box">Pellentesque ut lacinia nunc, eu molestie nulla. Pellentesque viverra nisi urna, at hendrerit nisl sodales in. Morbi auctor sodales nisi, eget aliquam justo maximus in. Suspendisse a felis a massa elementum pellentesque quis eget dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> </div> <!--/END SINGLE BOX--> </div> <!--/END ROW--> </div> <!--/END CONTAINER--> </section> <!--/END SECTION BANNER BOX-->Add the following code in the Common > CSS tab
/*------------------------------------------------- VARIABLES: choose the colors of your banner -------------------------------------------------*/ $main-color: #FF6C00; $background-color: #FBDE9C; /*------------------------------------------------- SECTION: BOXES -------------------------------------------------*/ .section-header { padding-bottom: 20px; h2 { margin-bottom: 20px; } } .banner-box { margin-bottom: 20px; background-image: url("https://i.imgur.com/k7SnZth.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; background-color: $background-color; /* to be sure that even if the image above will not be loaded there will be at least a colored background */ } .x-title { padding-left: 15px; padding-right: 15px; padding-top: 15px; text-align: center; color: $main-color; } .description p { margin-bottom: 10px; padding-left: 15px; padding-right: 15px; text-align: center; } .banner-box .single-box { padding-bottom: 20px; .x-icon { font-size: 70px; } } //COLUMNS MANAGEMENT .col3 { width: 30%; float: left; position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .col2 { width: 45%; float: left; position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .col4 { width: 22,5%; float: left; position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .container::after, .row::after { clear: both; } .col2, .col3, .col4 { text-align: center; } .row::after { content: " "; display: table; } //ICON AND BOX HEADING COLOR .banner-box .single-box .x-icon, .single-box h3 { color: $main-color; } //BOX HEADING POSITIONING .banner-box .single-box h3 { margin-top: 20px; text-align: center; } //COLORED LINE .colored-line { margin: auto; width: 165px; height: 1px; background: $main-color; } //SINGLE BOX, TEXT ALIGNMENT .box p { text-align: center; } //TEXT ALIGNMENT INSIDE BUTTONS #my-button { text-align: center; padding-bottom: 5px; } //IMAGE SIZE AS ICON SIZE .responsive-img { border-style: none; border-width: 1px; height: 70px; background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; } //LIST ALIGNMENT .feature-list { text-align: left; list-style-type: none; } //BUTTON BACKGROUND .col2, .col3, .col4 { .btn.btn-icon-text.ember-view { background: $main-color; } } //CLOSE BUTTON ON THE TOP RIGHT .banner-box .close { border: none; background: transparent; padding-top: 5px; float: right; }Add the following code in the Mobile > CSS tab
//MOBILE DEVICES @media only screen and (min-device-width: 320px) and (max-device-width: 800px) { .col2, .col3, .col4 { width: 90%; } }What you have to change on this banner:
After Headertab
- You will have to edit all the text!
- Change Font Awesome Icons, use your favorites
- Remember to change the link of the button
Common CSStab
- Change the colors of the banner, just change the values within the variables at the beginning of the stylesheet. You can use both the hexodecimal colors (e.g.
#FF6C00) and the color name (e.g.red)- Change the
banner-boxbackground-image URL with the one you preferAnd what you can change:
You can delete an item. For example, if the banner closing button is not useful for you, you can comment out or delete it.
You can duplicate an item. For example, if you want to add another list or button in another column, copy and paste the relevant code:
You can change the number and size of the columns.
- In the CSS, 3 types of columns are specified:
col2= 2 columns banner (each column occupies 45% of the available space)
col3= 3 column banner (each column occupies 30% of the available space)
col4= 4 columns banner (each column occupies 22.5% of available space)
In theAfter Headertab all I’ve changed is the name of the columns. Instead of threecol3columns, in everySingle BoxI changedcol3to acolx, acolxand anothercolx(where x is the number above). It is possible to change the number of columns, for example using 2 Single Box withcol2(one of the Single Box will be commented), or 4 Single Box with 4col4(the missing Single Box will be duplicated). The important thing not to break the banner layout (especially on mobile) is that the sum of the columns must always be of width90%in totalHow it appears:
Desktop view:
Mobile view:
A two-column Discourse banner
This is a responsive two column banner that can be also enabled on mobile devices.
Automatic installation : GitHub - discourse/discourse-two-columns-banner
Manual Installation:
Add the following code in the Common > After Header tab
<!--SECTION BANNER BOX--> <section class="banner-box"> <!--ADD A "CLOSE BANNER" BUTTON ON THE TOP RIGHT--> <!--To disable this button, comment the <button> </button> tag--> <button class="close" data-dismiss="alert"> <i class="fa fa-times d-icon d-icon-times" title="Close."></i> </button> <div class="container"> <!--SECTION HEADER--> <div class="section-header "> <!--TITLE--> <h2 class="x-title"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> <div class="colored-line"></div> <div class="description"><p> Nulla ullamcorper augue vel sodales pellentesque. Sed vitae sapien sit amet mauris consequat malesuada. Vestibulum vitae iaculis nisl, vel aliquet velit. Fusce venenatis laoreet diam, non dictum nisl vestibulum non.</p> </div> <div class="colored-line"></div> </div> <!--/END SECTION HEADER--> <div class="row"> <!--SINGLE BOX--> <div class="col2 single-box"> <!--IMAGE--> <img src="https://i.imgur.com/oRoO3Ya.png" class="responsive-img"> <!--HEADING--> <h3>A simple box</h3> <!--BOX DESCRIPTION--> <p class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id congue eros, sit amet suscipit libero. Nunc vitae placerat est. Sed ornare sit amet justo eu rutrum. Integer sit amet facilisis ipsum.</p> <!--LIST--> <div> <ul class="feature-list"> <li><i class="fa fa-coffee"></i><a href="your-url"> Coffee and milk</a> to wake up in the morning</li> <li><i class="fa fa-heartbeat"></i> One hour of gym</li> <li><i class="fa fa-book"></i> Rearrange books in the study</li> </ul> </div> <!--BUTTON--> <div class="buttons" id="my-button"> <a href="enter-a-url" class="btn btn-icon-text ember-view"><i class="fa fa-commenting d-icon d-icon-commenting"></i>My new button</a> </div> </div> <!--/END SINGLE BOX--> <!--SINGLE BOX--> <div class="col2 single-box"> <!--IMAGE--> <img src="https://i.imgur.com/ZCXib8B.png" class="responsive-img"> <!--HEADING--> <h3>Another simple box</h3> <!--BOX DESCRIPTION--> <p class="box">Integer velit ante, <a href="www.discourse.org">DISCOURSE</a> amet tristique in, gravida at ligula. Sed gravida mauris id neque vestibulum semper. Suspendisse potenti. Nam nec maximus ligula. Ut eget semper est. Sed ornare sit amet justo eu rutrum. Integer sit amet facilisis ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id congue eros, sit amet suscipit libero. Nunc vitae placerat est.</p> <!--BUTTON--> <div class="buttons" id="my-button"> <a href="enter-a-url" class="btn btn-icon-text ember-view"><i class="fa fa-user-plus d-icon d-icon-user-plus"></i>My new button</a> </div> </div> <!--/END SINGLE BOX--> </div> <!--/END ROW--> </div> <!--/END CONTAINER--> </section> <!--/END BANNER BOX SECTION-->Add the following code in the Common > CSS tab
/*------------------------------------------------- VARIABLES: choose the colors of your banner -------------------------------------------------*/ $main-color: #5270FE; $background-color: #BFD7FF; /*--------------------------------------- SECTION: BOXES -----------------------------------------*/ .section-header { padding-bottom: 20px; h2 { margin-bottom: 20px; } } .banner-box { margin-bottom: 20px; background-image: url("https://i.imgur.com/4qwhXM3.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; background-color: $background-color; /* to be sure that even if the image above will not be loaded there will be at least a colored background */ } .x-title { padding-left: 15px; padding-right: 15px; padding-top: 15px; text-align: center; color: $main-color; } .description p { margin-bottom: 10px; padding-left: 15px; padding-right: 15px; text-align: center; } .banner-box .single-box { padding-bottom: 20px; .x-icon { font-size: 70px; } } //COLUMNS MANAGEMENT .col3 { width: 30%; float: left; position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .col2 { width: 45%; float: left; position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .col4 { width: 22.5%; float: left; position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .container::after, .row::after { clear: both; } .col2, .col3, .col4 { text-align: center; } .row::after { content: " "; display: table; } //ICON AND BOX HEADING COLOR .banner-box .single-box .x-icon, .single-box h3 { color: $main-color; } //BOX HEADING POSITIONING .banner-box .single-box h3 { margin-top: 20px; text-align: center; } //COLORED LINE .colored-line { margin: auto; width: 165px; height: 1px; background: $main-color; } //SINGLE BOX, TEXT ALIGNMENT .box p { text-align: center; } //TEXT ALIGNMENT INSIDE BUTTONS #my-button { text-align: center; padding-bottom: 5px; } //IMAGE SIZE AS ICON SIZE .responsive-img { border-style: none; border-width: 1px; height: 70px; background-size: cover; background-position: center center; background-repeat: no-repeat; } //LIST ALIGNMENT .feature-list { text-align: center; list-style-type: none; } //BUTTON BACKGROUND .col2, .col3, .col4 { .btn.btn-icon-text.ember-view { background: $main-color; } } //CLOSE BUTTON ON THE TOP RIGHT .banner-box .close { border: none; background: transparent; padding-top: 5px; float: right; }Add the following code in the Mobile > CSS tab
//MOBILE DEVICES @media only screen and (min-device-width: 320px) and (max-device-width: 800px) { .col2, .col3, .col4 { width: 90%; } .feature-list { text-align: center; } }What you have to change on this banner:
After Headertab
- All that is listed in the previous banner and in addition change the
image srcin the twoSingle BoxCommon CSStab
- All that is listed in the previous banner
And what you can change:
- All that is listed in the previous banner, including the number and size of the columns!
How it appears:
Desktop view:
Mobile view:
Coming soon other banners
Posts: 1
Participants: 1
@tobiaseigen wrote:
Hi everyone - I am struggling a bit to troubleshoot twitter cards on links to my forum and understand what to do to fix it. There are some interrelated features that I am no clear on how they play together. Any guidance much appreciated.
The card validator at https://cards-dev.twitter.com/validator indicates “ERROR: Fetching the page failed because it’s denied by robots.txt.” for topic URLs on my forum. But links to topics on meta work fine. I have twitter logins enabled, though I use SSO. I also have search engine indexing disabled.
Posts: 6
Participants: 3
(iOS) or 
(Android). This opens a list of apps available to share the picture. Not only the OS-native apps like Mail and iCloud, but also other installed apps like Signal and Outlook. But I’m not seeing Discourse app 
