B!P editor thread (HTML, CSS stuff)

Public forum for all b!p related stuff (formerly "Lets work on blog!project!" thread).
Post Reply
User avatar
WhiteForte
Juice=Juice
Posts: 233
Joined: Sat Oct 27, 2012 9:32 am

B!P editor thread (HTML, CSS stuff)

Post by WhiteForte »

I figured I'd make a thread like this for preppers like me who like to be as faithful as possible when prepping. Since the editor in b!p is kinda... odd I use some tricks to make the posts as similar as possible to the source. Everyone is welcome to post more and I'll add it to the main post.

Note: remember to always paste the text of the entry in text mode rather than visual mode, it'll make work easier.


Accurate spacing:
Since the editor deletes consecutives line breaks and spaces, here are two pieces of code I use for them to show correctly:
 
Line breaks (enters):
Spoiler: [+]
<ul class="bbc">[*]In text mode look consecutives line breaks you want to put.[*]Use the <code></code> for each line that doesn't have text.[*]Single lines don't need the <code> tag.[*]An example might look like this:

Code: Select all

コメントの質問に答えます
<code></code>
<code></code>
<code></code>
<code></code>
明日がんばるぞーーー\(^-^)/
[*]This will show as four line breaks and they won't be deleted by the editor.[/list]<ul class="bbc">[*]EXTRA STEP: sometimes adding 40-50 of these <code> tags can be time consuming, plus my pinky gets tired with all the copy-pasting, so we'll ask the help of a regular expression (don't worry, you don't need to know anything about them). For this, an advanced text editor like Notepad++ or Sublime Text is needed (I prefer the latter). For this example I'll use Sublime Text as the reference, but it should work for any editor that supports regular expressions.<ul class="bbc">[*]First, in text mode cut (ctrl+x) all the content of the post and paste it in a new file.[*]Go to "Find->Replace..." in the menu bar.[*]Two text fields will appear on the bottom. In the one that says "Find what" go to the left and look for an icon that looks like this
tut1.png
. Press it to enable regular expressions.[*]Now paste this in the "Find what" field:^ *\n[*]In the "Replace with" field paste this:<code></code>\n[*]Now hit the "Replace all button".[*]Copy everything and paste back into the editor. Now we have all the line breaks in just a couple of seconds![/list][/list]
&nbsp method (line breaks):
Spoiler: [+]
<blockquote class="ipsBlockquote" data-author="Thea" data-cid="204706" data-time="1485841416">Another way for line breaks is to use &nbsp;
If there's only two lines they'll keep, but if there's three or more it needs to go in between. For example:

漢字これが漢字ですよーっっ

&nbsp;

また漢字か( ;´Д`)

Whereas, if it were just

漢字これが漢字ですよーっっ


また漢字か( ;´Д`)

the &nbsp; isn't needed. If you have an even number of spaces, it goes like this:
Spoiler: [+]

漢字これが漢字ですよーっっ

&nbsp;

&nbsp;

&nbsp;


また漢字か( ;´Д`)
</blockquote>
Multiple spaces:
Spoiler: [+]
<ul class="bbc">[*]Always in text mode, go to the part where the multiple spaces are.[*]Surround the closest word to the spaces with thes code shown bellow (the text has to go before the closing tag):

Code: Select all

まーちゃん(クロッキーさんも
<span style="padding-left: 14em;">お仕事するんですね)</span>
[*]This will produce the following effect:
tut2.png
[*]The width of the spaces is controlled by the numer before the "em" part. This will have to be seen at the moment by the person.[/list]

 
Font size:
Spoiler: [+]
I couldn't seem to find the button for this in the editor, so I'll add it here:<ul class="bbc">[*]In text mode, surround the text you want to change size with the following code:

Code: Select all

<span style="font-size: 48px;">珍しいっっ</span>
[*]There are many sizes available:<ul class="bbc">[*]large: slightly bigger than the normal text.[*]x-large: bigger than the last one.[*]xx-large: biggest of the pre defined styles.[*]Variable size: if you feel xx-large is not big enough, the size can be especified in pixels like I did in the example.[*]Results of the text with the sizes described, in the same order:
tut4.png
[/list][/list]
 
Hashtag bubbles:
Spoiler: [+]
I've seen Yokoyama Reina using hashtags in her entries, so I decided to replicate them with the following css style:
 

Code: Select all

<a style="border-radius: 25px; border: 1px solid #ffdbe6; padding: 13px; color: #fc91b2;
font-size: 16px; text-decoration: none;" href="LINK" target="_blank">TEXT</a>
Result:
tut3.png
Just replace the TEXT area with the hashtag the girl is using and the LINK with the link to the ameblo link of that hashtag.
 
That was all I could think of for now. If anyone uses any tricks, please post them here :)
You do not have the required permissions to view the files attached to this post.
Last edited by WhiteForte on Fri Feb 03, 2017 8:49 am, edited 1 time in total.
<p style="text-align:right;">PNG Emoji list http://blog-project.net/?p=253876&preview=true
Image
User avatar
MejraThea
ANGERME
Posts: 3441
Joined: Fri Feb 15, 2013 11:53 am

Re: B!P editor thread (HTML, CSS stuff)

Post by MejraThea »

Another way for line breaks is to use &nbsp;

If there's only two lines they'll keep, but if there's three or more it needs to go in between. For example:
 
漢字これが漢字ですよーっっ


&nbsp;


また漢字か( ;´Д`)


Whereas, if it were just
 
漢字これが漢字ですよーっっ



また漢字か( ;´Д`)
 
the &nbsp; isn't needed. If you have an even number of spaces, it goes like this:
Spoiler: [+]
 
漢字これが漢字ですよーっっ


&nbsp;
 
&nbsp;
 
&nbsp;
 
 
また漢字か( ;´Д`)
Last edited by MejraThea on Mon Jan 30, 2017 11:06 pm, edited 1 time in total.
User avatar
WhiteForte
Juice=Juice
Posts: 233
Joined: Sat Oct 27, 2012 9:32 am

Re: B!P editor thread (HTML, CSS stuff)

Post by WhiteForte »

Thanks! I'll add it to the main post. I used that in the past, but changed to what I explained here, so I forgot about it.
<p style="text-align:right;">PNG Emoji list http://blog-project.net/?p=253876&preview=true
Image
Post Reply